分享利用HTML5实现图片压缩上传的实例代码

百变鹏仔 2个月前 (10-18) #H5教程

文章标签实例

实现流程：

获取上传的文件；
使用FileReader读取图片，并新建一个Image对象将FileReader读取的图片数据放进去；
使用canvas将Image对象等比缩放并写入到画布中，保存为base64格式的数据（这里使用的是FormData对象上传，其实这里已经可以直接将base64的数据通过ajax使用post方法上传到服务器，即可避免下面两个步骤）；
新建一个Blob对象将base64数据放入；
使用FormData对象上传到第三方云储存服务器；
立即学习“前端免费学习笔记（深入）”；
点击下载“嗨格式压缩大师”；

使用HTML原生上传图片，下面是踩的一些小坑：

accept设定上传文件的类型，这里直接用image/*，不指定具体的后缀名，否则部分安卓手机下无法上传图片；
添加multiple属性可选取多张图片（本例只做选取单张图片）；
capture="camera"属性可以调用摄像头（添加此属性在iPhone下会直接调用摄像头，而不会读取相册；且目前安卓和ios设备使用accept="image/*"均可选择使用摄像头拍照还是使用相册的图片，所以该属性可以忽略）。

<input id="imgUpload" type="file" onchange="addPic" accept="image/*" />

当input文件触发change事件后获取上传的文件

function addPic(e){  if (typeof FileReader === &#39;undefined&#39;) {    return alert(&#39;你的浏览器不支持上传图片哟！&#39;);  }  var files = e.target.files || e.dataTransfer.files;  if(files.length > 0){    imgResize(file[0], callback);  }}

使用FileReader获取图片数据，并使用canvas压缩

ios手机拍照会旋转90度，这里必须判断是否ios手机做出相应处理后再上传

function imgResize(file, callback){  var fileReader = new FileReader();  fileReader.onload = function(){    var IMG = new Image();    IMG.src = this.result;    IMG.onload = function(){      var w = this.naturalWidth, h = this.naturalHeight, resizeW = 0, resizeH = 0;      // maxSize 是压缩的设置，设置图片的最大宽度和最大高度，等比缩放，level是报错的质量，数值越小质量越低      var maxSize = {        width: 500,        height: 500,        level: 0.6      };      if(w > maxSize.width || h > maxSize.height){        var multiple = Math.max(w / maxSize.width, h / maxSize.height);        resizeW = w / multiple;        resizeH = w / multiple;      } else {        // 如果图片尺寸小于最大限制，则不压缩直接上传        return callback(file)      }      var canvas = document.createElement(&#39;canvas&#39;),      ctx = canvas.getContext(&#39;2d&#39;);      if(window.navigator.userAgent.indexOf(&#39;iPhone&#39;) > 0){        canvas.width = resizeH;        canvas.height = resizeW;        ctx.rorate(90 * Math.PI / 180);        ctx.drawImage(IMG, 0, -resizeH, resizeW, resizeH);      }else{        canvas.width = resizeW;        canvas.height = resizeH;        ctx.drawImage(IMG, 0, 0, resizeW, resizeH);      }      var base64 = canvas.toDataURL(&#39;image/jpeg&#39;, maxSize.level);      convertBlob(window.atob(base64.split(&#39;,&#39;)[1]), callback);    }  };  fileReader.readAsDataURL(file);}

将base64的数据转换成一个Blob对象

安卓手机不支持Blob构造方法

function convertBlob(base64, callback){  var buffer = new ArrayBuffer(base64.length);  var ubuffer = new Uint8Array(buffer);  for (var i = 0; i < base64.length; i++) {    ubuffer[i] = base64.charCodeAt(i)  }  var blob;  try {    blob = new Blob([buffer], {type: &#39;image/jpg&#39;});  } catch (e) {    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;    if(e.name === &#39;TypeError&#39; && window.BlobBuilder){      var blobBuilder = new BlobBuilder();      blobBuilder.append(buffer);      blob = blobBuilder.getBlob(&#39;image/jpg&#39;);    }  }  callback(blob)}

使用HTML5的FormData对象上传数据

function callback(fileResize){  var data = new FormData();  data.append(&#39;file&#39;, fileResize);  var config = {    headers: {&#39;Content-Types&#39;: &#39;multipart/form-data&#39;}  };  // 这里用的es6语法发起请求，可以无视  axios.post(url, data, config).then().catch(e){}}

【

文章推荐

分享利用HTML5实现图片压缩上传的实例代码

实现流程：

使用HTML原生上传图片，下面是踩的一些小坑：

当input文件触发change事件后获取上传的文件

使用FileReader获取图片数据，并使用canvas压缩

将base64的数据转换成一个Blob对象

使用HTML5的FormData对象上传数据

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集