通过canvas对象来压缩图片大小的话，在不特别影响图片质量的情况下，可以将图片压缩为原来的十分之一左右。
代码如下，请大家过目。
var width = img_this.width,height = img_this.height;
var scale = width / height;
width1 = 320;
height1 = parseInt(width1 / scale);
var Mycanvas=document.getElementById("canvas");
var context = Mycanvas.getContext("2d");
context.drawImage(img_this,0,0,width,height,0,0,width1,height1);
var cropStr =Mycanvas.toDataURL("image/jpeg",0.7);
这里的img_this是一个img对象，首先我们先得到这个图片的宽高比，然后指定canvas的宽度为320，高度由之前的宽高比来定。这里指定了canvas的宽度为720后，将图片画在canvas里面后转成的base64的宽度也会为320。
我们用drawImage方法将图片的（0,0）坐标到(0 + width , 0+ height)坐标也就是整张图片 画到 canvas（0,0）到（width1，height1）也就是整个canvas内。然后使用toDataUrl将图片转换成jpeg的格式，后面0.7为图片的压缩质量，可以理解为压缩率。不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
特别说明，上述是经过两步的压缩，大概能压缩到原来的十分之一。
context.drawImage(img_this,0,0,width,height,0,0,width1,height1);这是第一步压缩。
var cropStr =Mycanvas.toDataURL("image/jpeg",0.7);这是第二步压缩。
每一步压缩，图片大小都为原来的五分之一左右。经过测试，不影响图片的质量。