<h2>TIP</h2>    <p>最近在一个项目中需要实现一个移动端上传图片文件的需求，主要需求的是压缩并且按照比例自动裁切图片然后上传。</p>    <p>一听是蛮简单的，因为是在移动端使用，所以完全可以使用 HTML5 的新特性以及一些 API。</p>    <p>主要的思路是这样：</p>    <ol>     <li>监听一个 input (type='file') 的 change 事件，然后拿到文件的 file ;</li>     <li>把 file 转成 dataURL ；</li>     <li>然后用 canvas 绘制图片，绘制的时候经过算法按比例裁剪;</li>     <li>然后再把 canvas 转成 dataURL ;</li>     <li>再把 dataURL 转成 blob ;</li>     <li>接着把 blob append 到 FormData 的实例对象。</li>     <li>最后上传。</li>    </ol>    <p>主要用到的 <a href="/misc/goto?guid=4959674108627032153" rel="nofollow,noindex"> FileReader </a> 、 <a href="/misc/goto?guid=4959674108711330574" rel="nofollow,noindex"> canvas </a> 、 <a href="/misc/goto?guid=4959674108791154019" rel="nofollow,noindex"> FormData </a> 、 <a href="/misc/goto?guid=4959674108874919885" rel="nofollow,noindex"> Blob </a> 这几个 API。</p>    <p>开发过程遇到了蛮多坑，特别是在android下的微信浏览器内。</p>    <h2>监听 input(type=file) 获取文件内容。</h2>    <pre>  // html 片段    <input type="file" id="file-input" name="image" accept="image/gif, image/jpeg, image/png">  </pre>    <p>对于 type 为 file 的 input 我们可以设置 accept 属性来现在我们要上传的文件类型，这里的目的是上传图片文件，所以我们可以设置： accept="image/gif, image/jpeg, image/png" 。</p>    <pre>  // JavaScript  document.getElementById('file-input').onchange= function (event) {    // 通过 event.target 回去 input 元素对象，然后拿到 files list，取第一个 file    let file = event.target.files[0];    // compressImage 在下面解释，它接受三个参数，文件、裁剪的长宽比例，回调函数（回调函数获得一个 FormData 对象，文件已经存在里面了）；    compressImage(file, [1, 1], (targetFormData) => {      //...... 这里获取到了 targetFormData，就可以直接使用它上传了    });  };  </pre>    <h2>fileToDataURL： file 转成 dataURL</h2>    <p>这里用到的是 FileReader 这个 API。</p>    <p><a href="/misc/goto?guid=4959674108627032153" rel="nofollow,noindex">https://developer.mozilla.org/en-US/docs/Web/API/FileReader</a></p>    <pre>  /**   * file 转成 dataURL   * @param file 文件   * @param callback 回调函数   */  function fileToDataURL (file, callback) {    const reader = new window.FileReader();    reader.onload = function (e) {      callback(e.target.result);    };    reader.readAsDataURL(file);  }  </pre>    <h2>compressDataURL：dataURL 图片绘制 canvas，然后经过处理（裁剪 & 压缩）再转成 dataURL</h2>    <p>一开始是这样的</p>    <ol>     <li>我们需要创建一个 Image 对象，然后把 src 设置成 dataURL ，获取到这张图片；</li>     <li>我们需要创建一个 canvas 元素，用来处理绘制图片；</li>     <li>获取裁剪的长宽比例，然后判断图片的实际长宽比例，按照最大化偏小的长或宽然后另一边采取中间部分，和 css 把 background 设置 center / cover 一个道理；</li>     <li>调用 ctx.drawImage 绘制图片；</li>     <li>使用 canvas.toDataURL 把 canvans 转成 dataURL 。</li>    </ol>    <pre>  /**   * 使用 canvas 压缩处理 dataURL   * @param dataURL   * @param ratio 比例   * @param callback   */  function compressDataURL (dataURL, ratio, callback) {    // 1    const img = new window.Image();    img.src = dataURL;    // 2    const canvas = document.createElement('canvas');    const ctx = canvas.getContext('2d');    // 3    canvas.width = 100 * ratio[0];    canvas.height = 100 * ratio[2];    const RATIO = canvas.width / canvas.height;    let cutx = 0;    let cuty = 0;    let cutw = img.width;    let cuth = img.height;    if (cutw / cuth > RATIO) {      // 宽超过比例了]]      let realw = cuth * RATIO;      cutx = (cutw - realw) / 2;      cutw = realw;    } else if (cutw / cuth < RATIO) {      // 长超过比例了]]      let realh = cutw / RATIO;      cuty = (cuth - realh) / 2;      cuth = realh;    }    // 4    ctx.drawImage(img, cutx, cuty, cutw, cuth, 0, 0, canvas.width, canvas.height);    const ndata = canvas.toDataURL('image/jpeg', 1);    callback(ndata);  }  </pre>    <p>一切的运行在pc端的chrome浏览器下模拟都很好，但是在移动端测试的时候发现 canvas 无法绘制出图片，发现是 img 设置 src 有延迟，导致还没获取到图片图像就开始绘制。</p>    <p>改进：监听 img.onload 事件来处理之后的操作：</p>    <pre>  /**   * 使用 canvas 压缩 dataURL   * @param dataURL   * @param ratio   * @param callback   */  function compressDataURL (dataURL, ratio, callback) {    const img = new window.Image();    img.src = dataURL;    // onload    img.onload = function () {      const canvas = document.createElement('canvas');      const ctx = canvas.getContext('2d');      canvas.width = 100 * ratio.width;      canvas.height = 100 * ratio.height;      const RATIO = canvas.width / canvas.height;      let cutx = 0;      let cuty = 0;      let cutw = img.width;      let cuth = img.height;      if (cutw / cuth > RATIO) {        // 宽超过比例了]]        let realw = cuth * RATIO;        cutx = (cutw - realw) / 2;        cutw = realw;      } else if (cutw / cuth < RATIO) {        // 长超过比例了]]        let realh = cutw / RATIO;        cuty = (cuth - realh) / 2;        cuth = realh;      }      ctx.drawImage(img, cutx, cuty, cutw, cuth, 0, 0, canvas.width, canvas.height);      const ndata = canvas.toDataURL('image/jpeg', 1);      callback(ndata);    };  }  </pre>    <h2>dataURLtoBlob：dataURL 转成 Blob</h2>    <p>这一步我们把 dataURL 转成 Blob</p>    <pre>  /**   * dataURL 转成 blob   * @param dataURL   * @return blob   */  function dataURLtoBlob (dataURL) {    let binaryString = atob(dataURL.split(',')[1]);    let arrayBuffer = new ArrayBuffer(binaryString.length);    let intArray = new Uint8Array(arrayBuffer);    let mime = dataURL.split(',')[0].match(/:(.*?);/)[1]      for (let i = 0, j = binaryString.length; i < j; i++) {      intArray[i] = binaryString.charCodeAt(i);    }      let data = [intArray];      let result = new Blob(data, { type: mime });    return result;  }  </pre>    <p>很完美了吗，在pc端模拟成功，在移动端chrome浏览器测试成功，但是在微信浏览器中失败，经过 try...catch 发现是在 new Blob 的时候失败。</p>    <p>查看之后发现是这个 API 对 Android 的支持还不明。</p>    <p>解决方法是利用 BlobBuilder 这个老 API 来解决： <a href="/misc/goto?guid=4959674108956323444" rel="nofollow,noindex">https://developer.mozilla.org/en-US/docs/Web/API/BlobBuilder</a></p>    <p>因为这个 API 已经被遗弃，不同机型和安卓版本兼容性不一致，所以需要一个判断。</p>    <p>解决方法：</p>    <pre>  /**   * dataURL 转成 blob   * @param dataURL   * @return blob   */  function dataURLtoBlob (dataURL) {    let binaryString = atob(dataURL.split(',')[1]);    let arrayBuffer = new ArrayBuffer(binaryString.length);    let intArray = new Uint8Array(arrayBuffer);    let mime = dataURL.split(',')[0].match(/:(.*?);/)[1]      for (let i = 0, j = binaryString.length; i < j; i++) {      intArray[i] = binaryString.charCodeAt(i);    }      let data = [intArray];      let result;      try {      result = new Blob(data, { type: mime });    } catch (error) {      window.BlobBuilder = window.BlobBuilder ||        window.WebKitBlobBuilder ||        window.MozBlobBuilder ||        window.MSBlobBuilder;      if (error.name === 'TypeError' && window.BlobBuilder){        var builder = new BlobBuilder();        builder.append(arrayBuffer);        result = builder.getBlob(type);      } else {        throw new Error('没救了');      }    }      return result;  }  </pre>    <h2>把获取到的 blob append 到 FormData 实例，执行回调</h2>    <p>这一步使用到我们之前的东西。</p>    <pre>  /**   * 压缩图片   * @param file 图片文件   * @param ratio 比例   * @param callback 回调，得到一个 包含文件的 FormData 实例   */  function compressImage (file, ratio, callback) {    fileToDataURL(file, (dataURL) => {      compressDataURL(dataURL, ratio, (newDataURL) => {        const newBlob = dataURLtoBlob(newDataURL);          const oData = new FormData();        oData.append('file', blob);          callback(oData);      });    });  }  </pre>    <h2>回到第一步，上传文件</h2>    <pre>  // JavaScript  document.getElementById('file-input').onchange= function (event) {    // 通过 event.target 回去 input 元素对象，然后拿到 files list，取第一个 file    let file = event.target.files[0];    // 接受三个参数，文件、裁剪的长宽比例，回调函数（回调函数获得一个 FormData 对象，文件已经存在里面了）；    compressImage(file, [1, 1], (targetFormData) => {        let xhr = new XMLHttpRequest();        // 进度监听      // xhr.upload.addEventListener('progress', progFoo, false);      // 加载监听      // xhr.addEventListener('load', loadFoo, false);      // 错误监听      // xhr.addEventListener('error', errorFoo, false);        xhr.onreadystatechange = function () {        if (xhr.readyState === 4) {          if (xhr.status === 200) {            // 上传成功，获取到结果 results            let results = JSON.parse(xhr.responseText);            // ......            }          } else {            // 上传失败          }        }      };      xhr.open('POST', '/api/upload', true);      xhr.send(targetFormData);    });  };  </pre>    <p>一切似乎都很完美，pc 端模拟测试通过，但是到移动端却发现上传了一个空文件，这不科学！！！查文档后发现这么一句话：</p>    <p>Note: XHR in Android 4.0 sends empty content for FormData with blob.</p>    <p>简直蒙蔽。</p>    <p>在 上找到了解决方案： <a href="/misc/goto?guid=4959674109045387747" rel="nofollow,noindex">http://stackoverflow.com/questions/15639070/empty-files-uploaded-in-android-native-browser/28809955#28809955</a></p>    <p>通过自己包装 FormDataShim 和重写 XMLHttpRequest.prototype.send 函数：</p>    <pre>  // Android上的AppleWebKit 534以前的内核存在一个Bug，  // 导致FormData加入一个Blob对象后，上传的文件是0字节  // QQ X5浏览器也有这个BUG  var needsFormDataShim = (function () {    var bCheck = ~navigator.userAgent.indexOf('Android') &&                 ~navigator.vendor.indexOf('Google') &&                !~navigator.userAgent.indexOf('Chrome');      return bCheck && navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534 || /MQQBrowser/g.test(navigator.userAgent);  })();    // 重写 Blob 构造函数，在 XMLHttpRequest.prototype.send 中会使用到  var BlobConstructor = ((function () {    try {      new Blob();      return true;    } catch (e) {      return false;    }  })()) ? window.Blob : function (parts, opts) {    let bb = new (      window.BlobBuilder ||      window.WebKitBlobBuilder ||      window.MSBlobBuilder ||      window.MozBlobBuilder    );    parts.forEach(function (p) {      bb.append(p);    });    return bb.getBlob(opts ? opts.type : undefined);  };    // 手动包装 FormData 同时重写 XMLHttpRequest.prototype.send  var FormDataShim = (function () {    var formDataShimNums = 0;    return function FormDataShim () {      var o = this;        // Data to be sent      let parts = [];        // Boundary parameter for separating the multipart values      let boundary = Array(21).join('-') + (+new Date() * (1e16 * Math.random())).toString(36);        // Store the current XHR send method so we can safely override it      let oldSend = XMLHttpRequest.prototype.send;      this.getParts = function () {        return parts.toString();      };      this.append = function (name, value, filename) {        parts.push('--' + boundary + '\r\nContent-Disposition: form-data; name="' + name + '"');          if (value instanceof Blob) {          parts.push('; filename="' + (filename || 'blob') + '"\r\nContent-Type: ' + value.type + '\r\n\r\n');          parts.push(value);        } else {          parts.push('\r\n\r\n' + value);        }        parts.push('\r\n');      };        formDataShimNums++;      XMLHttpRequest.prototype.send = function (val) {        let fr;        let data;        let oXHR = this;        if (val === o) {          // Append the final boundary string          parts.push('--' + boundary + '--\r\n');          // Create the blob          data = new BlobConstructor(parts);            // Set up and read the blob into an array to be sent          fr = new FileReader();          fr.onload  = function () {            oldSend.call(oXHR, fr.result);          };          fr.onerror = function (err) {            throw err;          };          fr.readAsArrayBuffer(data);            // Set the multipart content type and boudary          this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);          formDataShimNums--;          if (formDataShimNums === 0) {            XMLHttpRequest.prototype.send = oldSend;          }        } else {          oldSend.call(this, val);        }      };    };  })();  </pre>    <h2>SUCCESS</h2>    <p>重写 compressImage</p>    <pre>  /**   * 压缩图片   * @param file 图片文件   * @param ratio 比例   * @param callback 回调，得到一个 包含文件的 FormData 实例   */  function compressImage (file, ratio, callback) {    fileToDataURL(file, (dataURL) => {      compressDataURL(dataURL, ratio, (newDataURL) => {        const newBlob = dataURLtoBlob(newDataURL);          // 判断是否需要我们之前的重写        let NFormData = needsFormDataShim() ? FormDataShim : window.FormData;          const oData = new NFormData();        oData.append('file', blob);          callback(oData);      });    });  }  </pre>    <p>到这一步总算成功。</p>    <p>参考：</p>    <p><a href="/misc/goto?guid=4959674109045387747" rel="nofollow,noindex">http://stackoverflow.com/questions/15639070/empty-files-uploaded-in-android-native-browser/28809955#28809955</a></p>    <p><a href="/misc/goto?guid=4959674109127372756" rel="nofollow,noindex">http://www.alloyteam.com/2015/04/ru-he-zai-yi-dong-web-shang-shang-chuan-wen-jian/</a></p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959674109209319867" rel="nofollow">http://qiutc.me/post/uploading-image-file-in-mobile-fe.html</a></p>    <p> </p>