文档章节

利用html5 canvas上传前压缩图片

swingcoder
 swingcoder
发布于 2016/05/27 10:40
字数 132
阅读 3077
收藏 4

参考

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

 

© 著作权归作者所有

上一篇: 分布式锁
swingcoder
粉丝 33
博文 336
码字总数 75456
作品 0
广州
技术主管
私信 提问
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
2018/08/30
0
0
ShearPhoto 2.0 发布,支持HTML5本地截取头像,支持美图秀秀特效,支持几十M数码相片压缩截取

从shearphoto 1.5直接跳跃到shearphoto 2.0,这是shearphoto重大革新。本来我是想shearphoto 1.6 、1.7、 1.8 慢慢升的,但是这样升级只会让shearphoto慢慢走向灭亡!结果我又辛苦了一个多星...

明哥先生
2015/09/05
3.6K
15
奇妙的HTML5 Canvas动画实例

今日Google首页:铯元素的发现者 - 化学家罗伯特·本生 200 周年诞辰,利用HTML5 Canvas和静态图片实现了奇妙的动画效果。 动画中使用了多个Canvas典型的API,例如translate、addColorStop、...

彭博
2012/04/12
1K
0
推荐8个很酷很有用的HTML5应用程序

网络上有很多很多的设计和开发工具,但是好用又免费的却很少,所以今天这篇文章向大家分享示8个很酷的HTML5应用程序。这些惊艳的HTML5应用带您体验Web技术的魅力,相信你看完这些例子后会对未...

MrMign
2011/09/02
2.6K
4
微信公众号图片上传至阿里云OSS

最近在做微信公众号,需要将图片上传至阿里云OSS。在做这个功能的过程中,我走了不少弯路,尝试过很多种方法,最后终于研究出一种便捷优美的方式。现在把这些方法和思路记录下来,避免遗忘。...

naiba01
09/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android 图片加载带进度条的ImageView

https://blog.csdn.net/shu_quan/article/details/79975578

shzwork
21分钟前
7
0
关于XAMPP默认端口80 和443被占用的问题

本文转载于:专业的前端网站➩关于XAMPP默认端口80 和443被占用的问题 关于安装xampp-win32-1.8.1-VC9-installer.zip后启动时候报端口80和443被占用的问题解决 xampp-win32-1.8.1-VC9-instal...

前端老手
23分钟前
6
0
错误Setting the parent of a transform which resides in a Prefab Asset is...

错误日志 Setting the parent of a transform which resides in a Prefab Asset is disabled to prevent data corruption 原因1 用Resouce.Load加载一个prefab,没有实例化直接设置parent ......

XBlock
24分钟前
9
0
Spring boot 配置mybatis

当然任何模式都需要首先引入mybatis-spring-boot-starter的pom文件,现在最新版本是1.1.1(刚好快到双11了 :)) <dependency>    <groupId>org.mybatis.spring.boot</groupId>    <......

雷开你的门
24分钟前
9
0
云栖干货回顾 | 更强大的实时数仓构建能力!分析型数据库PostgreSQL 6.0新特性解读

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。AnalyticDB PG通过行存...

开源中国小二
36分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部