利用html5 canvas上传前压缩图片

原创
2016/05/27 10:40
阅读数 3.9K

参考

http://www.programering.com/a/MDOxAzMwATY.html

关键代码,就是利用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

http://mhbseal.com/demo/html5/html5ImgCompress/demo/index.html

nodejs 代码 https://www.npmjs.com/package/html5-image-compress

 

使用blob上传图片的方法

http://www.zhangxinxu.com/study/201310/blob-get-image-show.html

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
4 收藏
分享
打赏
0 评论
4 收藏
0
分享
返回顶部
顶部