H5相机上传图片压缩

在html中添加

<canvas id="myCanvas" style="display: none">
 ??你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>

 //1、设置压缩后的最大宽度 or 高度；
 //2、设置压缩比例，根据图片的不同size大小，设置不同的压缩比。

 ???function compress(res,fileSize) { //res代表上传的图片，fileSize大小图片的大小
 ???????var img = new Image(),
 ???????????maxW = 640; //设置最大宽度
 ???????img.onload = function () {
 ???????????var cvs = document.getElementById(‘myCanvas‘),
 ???????????????ctx = cvs.getContext( ‘2d‘);

 ???????????if(img.width > maxW) {
 ???????????????img.height *= maxW / img.width;
 ???????????????img.width = maxW;
 ???????????}

 ???????????cvs.width = img.width;
 ???????????cvs.height = img.height;

 ???????????ctx.clearRect(0, 0, cvs.width, cvs.height);
 ???????????ctx.drawImage(img, 0, 0, img.width, img.height);

 ???????????var compressRate = getCompressRate(1,fileSize);

 ???????????var dataUrl = cvs.toDataURL( ‘image/jpeg‘, compressRate);

 ???????????document.body.appendChild(cvs);
 ???????????console.log(dataUrl);
// ???????????ctx.clearRect(0,0,cvs.width,cvs.height); 清空画布
// ???????????ctx.beginPath();
 ???????}

 ???????img.src = res;

https://my.oschina.net/zyxchuxin/blog/700381