項目分享五：H5圖片壓縮與上傳

時間 2019-11-06

標籤項目分享 h5 圖片壓縮上傳简体版

原文原文鏈接

1、簡介

圖片的壓縮與上傳，是APP裏一個很經常使用的功能。咱們來年看 ChiTuStore 是怎樣作的。相關文件 App/Module/User/UserInfo.html,App/Module/User/UserInfo.tshtml

2、HTML佈局

HTML 文件中，有以下二句，第一句就是上圖所看到的圖片，其中的 class 表示該圖片以圓形來顯示，而且靠右。第二句是一個 Input 控件，其類型爲 file ，是用來上傳文件的。值得注意的是 style，這的做用是讓該控件與圖片重疊，而且透明（opacity:0)，accept="image/*" 的做用是隻上傳圖片。node

 <img data-bind="attr:{src:userInfo.HeadImageUrl}" class="img-circle pull-right" style="width:70px;height:70px;">
 <input type="file" style="position:absolute;top:0px;left:0px;opacity:0;width:100%;height:90px;" accept="image/*">

3、圖片的壓縮

傳統 WEB 的作法，都是把圖片直接上傳到服務端，而後在服務端進行壓縮。但如今，在H5 中，是能夠對圖片進行壓縮再上傳的。咱們來看一下 JS 代碼，其中的 ImageFileResize 就是用來處理圖片的壓縮的。git

    page.viewChanged.add(() => {
        var e = page.nodes().content.querySelector('[type="file"]');
        var imageFileResize = new ImageFileResize(<HTMLInputElement>e, { maxWidth: 100, maxHeight: 100 });
        imageFileResize.imageResized = (urls: string[], thumbs1: string[], thumbs2: string[]) => {
            model.userInfo.HeadImageUrl(thumbs1[0]);
            member.setUserInfo(mapping.toJS(model.userInfo));
        }
        ko.applyBindings(model, page.node());
    })

咱們如今來看一下 ImageFileResize 中的關鍵代碼，這段代碼的做用是用來把 <input type="file"/> 選取的文件，進行壓縮的。其中有幾個關鍵的對象、函數，是 H5 中的 API，FileReader，createObjectURL，Image。github

這幾個對象、函數的具體用法，在這裏就不展開說了，網上搜一下就能夠找到答案了。web

 var reader = new FileReader();
 reader.readAsArrayBuffer(file);
 reader.onload = (ev: Event) => {
      var blob = new Blob([event.target['result']]);
      window['URL'] = window['URL'] || window['webkitURL'];
      var blobURL = window['URL'].createObjectURL(blob); // and get it's URL
      var image = new Image();
      image.src = blobURL;
      image.onload = () => {
           var url = this.resizeMe(image, max_width, max_height);
           var thumb = this.resizeMe(image, this.thumb2.maxWidth, this.thumb2.maxHeight);
           result.resolve({ index: index, url: url, data: url, thumb: thumb });
      }
 }

下面咱們再來看一下 resizeMe 函數，這個函數的把的圖片(HTMLImageElement)，轉換爲了 base64 的字符串，其中一個重要的對象就是 canvas，它也是 H5 中的對象。經過它能夠把圖片轉換爲 base64 字符串。數據庫

 private resizeMe(img: HTMLImageElement, max_width: number, max_height: number) {

        var canvas = document.createElement('canvas');

        var width: number = img.width;
        var height: number = img.height;

        // calculate the width and height, constraining the proportions
        if (width > height) {
            if (width > max_width) {
                height = Math.round(height *= max_width / width);
                width = max_width;
            }
        } else {
            if (height > max_height) {
                width = Math.round(width *= max_height / height);
                height = max_height;
            }
        }

        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        return canvas.toDataURL("image/jpeg", 0.7);

    }