利使用 canvas 实现图片压缩
项目中做身份证识别时,需要传送图片的 base64 格式编码,但是手机拍摄的照片都太大了,转成 base64 简直可怕,因而找了一下处理办法
涉及到的知识点
onchange
事件是在上传完文件之后触发- 用
files
属性获取到上传的文件对象 readAsDataURL
使用于转换成base64
编码- 区分
canvas
的 画布 和 绘画环境:- 画布:对应代码中的
cvs
,可以设置画布width
,height
; - 绘画环境:对应代码中的
ctx
,可以设置fillStyle
,fillRect
等;
- 画布:对应代码中的
- 用
canvas
自带的drawImage()
方法将图片画到canvas
上 - 想取到压缩后图片的
base64
可以用canvas
自带的toDataURL()
方法
完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <input type="file" onchange="loadImg(this)"> <hr> <div>800×449,544KB</div> <img src="" alt=""> <hr> <div>400×224,157KB</div> <canvas></canvas> <script> // 上传图片 function loadImg(me) { let img = document.querySelector('img'); let cvs = document.querySelector('canvas'); let file = me.files[0]; // 获取到文件对象 // 上传的图片大于 500KB 时才压缩 if (file && (file.size / 1024 > 500)) { let reader = new FileReader(); reader.readAsDataURL(file); // 转成 base64 编码 reader.onload = function (e) { let naturalBase64 = e.target.result; // 获取 base64 编码,这是原图的 img.src = naturalBase64; img.onload = function () { let ratio = img.naturalWidth / img.naturalHeight; // 获取原图比例,为了等比压缩 cvs.width = 400; cvs.height = cvs.width / ratio; let ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // 画在 canvas 上 // 压缩后新图的 base64 let zipBase64 = cvs.toDataURL(); } } } } </script></body></html>
效果图
效果图
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 利使用 canvas 实现图片压缩
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 利使用 canvas 实现图片压缩