移动端压缩上传图片-白红宇

移动端压缩上传图片

阅读量：7067 次

发布时间：2019-06-28

本文共 1986 字，大约阅读时间需要 6 分钟。

btnFile.οnchange=function(event){

jt=1;

imgWrap.setAttribute("class","clearfix");

var files = event.target.files;

var url = URL.createObjectURL(files[0]);

img.src = url；

//qq浏览器在预览后卡死

for(var i = 0, f; f = files[i]; i++){

if(!f.type.match('image.*')) continue;

//console.log("压缩前1："+files[i].size);

var reader = new FileReader();

reader.onload = (function(theFile){

return function(e){

var imgpre = new Image();

imgpre.src = e.target.result;

// console.log("压缩前："+imgpre.src.length);

// img.src = e.target.result;

var simg=jic.compress(imgpre,10);//保存到服务器的图片

simg.id="simg";

simg.style.display="none";

imgWrap.appendChild(simg);

//console.log("压缩后："+simg.src.length);

}

})(f);

reader.readAsDataURL(f);

}

compress: function(source_img_obj, quality, output_format){

var mime_type = "image/jpeg";

if(output_format!=undefined && output_format=="png"){

mime_type = "image/png";

}

var cvs = document.createElement('canvas');

//naturalWidth真实图片的宽度

cvs.width = 360;//source_img_obj.naturalWidth;

cvs.height = 480//source_img_obj.naturalHeight;

var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);

var newImageData = cvs.toDataURL(mime_type, quality/100);

alert(source_img_obj.naturalWidth);//安卓uc获取0 chrome,qq,safari试了没问题

alert(source_img_obj.naturalHeight);

alert("newImageData:"+newImageData);

var result_image_obj = new Image();

result_image_obj.src = newImageData;

return result_image_obj;

}

/*在请求中添加图片start*/

var uimg=document.getElementById("u-img");

if (jt==1 || jt=="1") {

var blob;

var simg=document.getElementById("simg");

if(simg){

var idata=simg.src.split(',')[1];

var mimeString = simg.src.split(',')[0].split(':')[1].split(';')[0];

idata=window.atob(idata);

var ia=new Uint8Array(idata.length);

for (var i = 0; i < idata.length; i++) {

ia[i]=idata.charCodeAt(i);

};

alert([mimeString]);

alert([ia]);

blob=new Blob([ia],{type:mimeString})；//uc浏览器走不到这里

alert(4);

data.append('pic1', blob);

alert(blob);

}

/*在请求中添加图片end*/

转载于:https://my.oschina.net/wsh2016/blog/749998

你可能感兴趣的文章