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、压缩图片:

 modify_img_size (path, obj, callback) {

 //path可以是相对路径,也可以是base64位,我这里传的是bse64位
var img = new Image();
img.src = path; img.onload = function () {
//图片加载初始化执行 var that = this;
var w = that.width, h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
//图片的质量为0.5,越小越模糊,文件也就越小
var quality = 0.5; //创建canvas画图
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d'); var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
} var base64 = canvas.toDataURL('image/jpeg', quality); callback(base64);
} }

5、读取二进制(base64位信息),let zipReady = new FileReader();      zipReady.readAsDataURL(oFiles[0]);   初始化读取base64,上传、预览:

  let _that = this;    

         zipReady.onload = function (e) {     //初始化开始

 //调用压缩方法,e.target.result为压缩结果 , {width: 1000}为压缩后宽度,resImg为压缩之后的base64位回调函数结果

           _that.modify_img_size(e.target.result, {width: 1000}, function (resImg) {

 //转为8 位无符号整数值的类型化数组,存为图片信息,有返回值
function dataURItoBlob(dataURI) { var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
} console.info(ia);
return new Blob([ia], {type:mimeString});
} //********************************************************** var blob = dataURItoBlob(resImg); //将base64做处理 let formDataImg = new FormData(); formDataImg.append('multipart', blob, oFiles[0].name);
//将从内存中读取处理之后的数据流blob插入form表单中,记得要给它取个名字,否则后端不能识别,我这里去的是原始图片的名字 formDataImg.append('accessToken', aToken); //如果查过2M则提示图片太大,返回
if (resImg.length > 2097152) { Toast(_that.$t('message.myInfo.tobig')) return true
} // 预览图片,用户选择一次不满意,要重先选择,则要删掉这个img标签,重先创建一个img
let getTempImgNode = document.getElementById('tempImg');
if (getTempImgNode) {
getTempImgNode.remove(); } HTTP.postImg('/gate/v1/userExpandInfo/updateHeadPortrait', formDataImg).then(res => { if (res.code == 0) { //上传成功之后,再次读取base64信息,创建img,生成预览
let rdader = new FileReader();
rdader.readAsDataURL(oFiles[0]); rdader.onload = function (e) { let getPicParent = document.getElementById('changePic');
let newNode = document.createElement('img');
newNode.setAttribute('id', 'tempImg');
newNode.setAttribute('src', e.target.result); getPicParent.appendChild(newNode) }; return true;
} else {
Toast(_that.$t('message.code[' + res.code + ']')); } }) }) };

 

上一篇:SVN权限的继承关系探讨


下一篇:SVN权限的继承关系探讨