本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带怎么用Canvas压缩图片?用Canvas压缩图片 的注意事项有哪些,下面就是实战案例,一起来看一下。一、本地图片输入
1. 获取本地文件
1 2 |
|
1 2 3 4 5 6 |
|
很简单,就是通过type类型为file的按钮来获取本地文件。
2. 判断所获取的本地文件类型
1 2 |
|
1 2 3 4 5 6 7 8 |
|
3. 将所获取的本地图片以base64格式输出
1 2 3 4 5 6 7 8 9 10 |
|
二、在Canvas画布中绘制图片
1. 创建画布
1 2 3 4 |
|
注意:画布大小与所输入图片宽高相同。
2. 绘制图片
1 |
|
三、压缩图片并输出
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
经测试发现,通过Canvas压缩JPEG格式图片效果最佳,PNG压缩效果不明显,有时反而变得更大。
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
H5的块级标签汇总
H5的进阶段内联标签
怎样使用H5调用摄像头
以上就是怎么用Canvas压缩图片的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
canvas引入跨域的图片导致todataurl()报错的问题的解决
基于html5 canvas的字符串,路径,背景,图片的分析
借助todataurl实现将html5 canvas的内容保存为图片
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者