vue开发中vue-resource + canvas 图片压缩、上传、预览
1、使用vue-resource上传，也可以自定义ajax上传；
2、使用<input type="file" @change="submit()" name="multipart" class="element" accept="image/*" id="headerImage">标签，在submit的时候执行方法
3、正式代码 let oFiles = document.querySelector("#headerImage").files;
4、压缩图片：
1 modify_img_size (path, obj, callback) { 2 3 //path可以是相对路径，也可以是base64位，我这里传的是bse64位 4 var img = new Image(); 5 img.src = path; 6 7 img.onload = function () { 8 //图片加载初始化执行 9 10 var that = this; 11 var w = that.width, 12 13 h = that.height, 14 scale = w / h; 15 w = obj.width || w; 16 h = obj.height || (w / scale); 17 //图片的质量为0.5，越小越模糊，文件也就越小 18 var quality = 0.5; 19 20 //创建canvas画图 21 var canvas = document.createElement('canvas'); 22 var ctx = canvas.getContext('2d'); 23 24 var anw = document.createAttribute("width"); 25 anw.nodeValue = w; 26 var anh = document.createAttribute("height"); 27 anh.nodeValue = h; 28 canvas.setAttributeNode(anw); 29 canvas.setAttributeNode(anh); 30 31 ctx.drawImage(that, 0, 0, w, h); 32 33 if (obj.quality && obj.quality <= 1 && obj.quality > 0) { 34 quality = obj.quality; 35 } 36 37 var base64 = canvas.toDataURL('image/jpeg', quality); 38 39 callback(base64); 40 } 41 42 }
5、读取二进制（base64位信息），let zipReady = new FileReader(); zipReady.readAsDataURL(oFiles[0]); 初始化读取base64，上传、预览：
1 let _that = this; 2 3 zipReady.onload = function (e) { //初始化开始 4 5 //调用压缩方法，e.target.result为压缩结果 ， {width: 1000}为压缩后宽度，resImg为压缩之后的base64位回调函数结果 6 7 _that.modify_img_size(e.target.result, {width: 1000}, function (resImg) { 8 9 10 //转为8 位无符号整数值的类型化数组，存为图片信息，有返回值 11 function dataURItoBlob(dataURI) { 12 13 14 var byteString; 15 if (dataURI.split(',')[0].indexOf('base64') >= 0) 16 byteString = atob(dataURI.split(',')[1]); 17 else 18 byteString = unescape(dataURI.split(',')[1]); 19 // separate out the mime component 20 var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 21 // write the bytes of the string to a typed array 22 var ia = new Uint8Array(byteString.length); 23 for (var i = 0; i < byteString.length; i++) { 24 ia[i] = byteString.charCodeAt(i); 25 } 26 27 console.info(ia); 28 return new Blob([ia], {type:mimeString}); 29 } 30 31 //********************************************************** 32 33 34 var blob = dataURItoBlob(resImg); //将base64做处理 35 36 37 let formDataImg = new FormData(); 38 39 formDataImg.append('multipart', blob, oFiles[0].name); 40 //将从内存中读取处理之后的数据流blob插入form表单中，记得要给它取个名字，否则后端不能识别，我这里去的是原始图片的名字 41 42 formDataImg.append('accessToken', aToken); 43 44 //如果查过2M则提示图片太大，返回 45 if (resImg.length > 2097152) { 46 47 Toast(_that.$t('message.myInfo.tobig')) 48 49 return true 50 } 51 52 53 // 预览图片，用户选择一次不满意，要重先选择，则要删掉这个img标签，重先创建一个img 54 let getTempImgNode = document.getElementById('tempImg'); 55 if (getTempImgNode) { 56 getTempImgNode.remove(); 57 58 } 59 60 61 HTTP.postImg('/gate/v1/userExpandInfo/updateHeadPortrait', formDataImg).then(res => { 62 63 if (res.code == 0) { 64 65 66 //上传成功之后，再次读取base64信息，创建img，生成预览 67 let rdader = new FileReader(); 68 rdader.readAsDataURL(oFiles[0]); 69 70 rdader.onload = function (e) { 71 72 let getPicParent = document.getElementById('changePic'); 73 let newNode = document.createElement('img'); 74 newNode.setAttribute('id', 'tempImg'); 75 newNode.setAttribute('src', e.target.result); 76 77 getPicParent.appendChild(newNode) 78 79 }; 80 81 82 return true; 83 } else { 84 Toast(_that.$t('message.code[' + res.code + ']')); 85 86 } 87 88 }) 89 90 }) 91 92 };
