H5上传压缩图片

时间 2019-11-08

标签 h5 上传压缩图片繁體版

原文原文链接

看这个，比较全的 https://github.com/mhbseal/html5ImgCompress ，几乎全部痛点都解决了！html

PC上传图片

基本结构

form[enctype="multipart/form-data"]
input[type="file"]
上传完毕后，获取图片url，显示到页面上

问题

图片要上传完毕后，才能显示
压缩上传

H5 如何解决

FileReader
canvas

FileReader

FileReader能够将File对象转化成base64，这样能够优先展现图片，而后处理上传操做。前端

var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(e) {
    $('img').attr('src', e.target.result);
};

FormData

实际的上传操做，大可能是ajax处理的，FormData能够用来构建form表单。html5

var fd = new FormData();
 fd.append('filename', file);
$.ajax({
     url: 'xxxx/yyyy',
     data: fd,
     type: 'POST',
     cache: false,//上传文件无需缓存
     processData: false,//对于Data参数进行序列化处理
     contentType: false,//必填
     dataType: 'json',
     success: function(data) {
     },
     error: function() {
     }
});

canvas

手机的流量是宝贵的，可是上传个一张照片可能有几M，全部须要对图片进行压缩处理，canvas对图片的操做是经过base64格式处理的。git

var img = new Image();
img.src = base64;
img.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    canvas.getContext("2d").drawImage(img, 0, 0);
    var compressBase64 = cvs.toDataURL(mime_type, quality / 100);
}

上传base64

使用mqq接口拍照或者获取本地图片时，反馈都是base64格式，input在处理过程当中，通过压缩等操做也可能将File对象转化成base64，对base64的上传支持有如下方案：github

server支持，单独开接口处理base64上传
前端将base64转化成File对象，复用原来的server接口

这里重点讨论第2中方案。JS提供了Blob对象，是一个类文件对象，File对象继承了Blob对象，而且作了一些扩展。基于此，只须要把base64转化成Blob对象便可。Blob的构造参考这里，能够使用类型数据来处理。ajax

// 解码base64 var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // 类型数组 var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString });