html5图片canvas压缩显示,利用html5 canvas上传前压缩图片

参考

关键代码，就是利用html5的canvas重绘图片，指定质量和尺寸达到在前端压缩后再上传的目的。

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

//NaturalWidth the real picture width

cvs.width = source_img_obj.naturalWidth;

cvs.height = source_img_obj.naturalHeight;

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

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

var result_image_obj = new Image();

result_image_obj.src = newImageData;

这里有个demo

使用blob上传图片的方法