侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

利用html5 canvas上传前压缩图片

2024-05-13 星期一 / 0 评论 / 0 点赞 / 92 阅读 / 995 字

参考 http://www.programering.com/a/MDOxAzMwATY.html 关键代码,就是利用html5的canvas重绘图片,指定质量和尺寸达到在前端压缩后再上传的目的。 v

参考

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

 

广告 广告

评论区