前端之家收集整理的这篇文章主要介绍了
利用canvas实现图片压缩的示例代码,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
项目中做身份证识别时,需要传送
图片的 base64 格式编码,但是手机拍摄的照片都太大了,转成 base64 简直可怕,因此找了一下
解决办法
涉及到的知识点
onchange 事件是在
上传完
文件之后触发
使用 files
属性获取到
上传的
文件对象
readAsDataURL 用于转换成 base64 编码
区分 canvas 的 画布 和 绘画环境:
画布:对应
代码中的 cvs,可以设置画布 width,height;
绘画环境:对应
代码中的 ctx ,可以设置 fillStyle,fillRect 等;
使用 canvas
自带的 drawImage()
方法将
图片画到 canvas 上
想取到压缩后
图片的 base64 可以使用 canvas
自带的 toDataURL()
方法
完整
代码
Document
800×449,544KB
400×224,157KB
原文链接:https://www.f2er.com/html5/15593.html