在HTML5中怎么实现图片压缩
导读:本文共1695字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 当我们在项目中做身份证识别时,需要传送图片的 base64 格式编码,但是手机拍摄的照片都太大了,转成 base64 简直可怕,因此找了一下解决办法涉及到的知识点onchange 事件是在上传完文件之后触发使用 files 属性获取到上传的文件对象readAsDataURL 用于转换成 base64 编码区分 canvas 的 画布 和 绘画环境:画布:对应代码... ...
目录
(为您整理了一些要点),点击可以直达。当我们在项目中做身份证识别时,需要传送图片的 base64 格式编码,但是手机拍摄的照片都太大了,转成 base64 简直可怕,因此找了一下解决办法
涉及到的知识点
onchange 事件是在上传完文件之后触发
使用 files 属性获取到上传的文件对象
readAsDataURL 用于转换成 base64 编码
区分 canvas 的 画布 和 绘画环境:
画布:对应代码中的 cvs,可以设置画布 width,height;
绘画环境:对应代码中的 ctx ,可以设置 fillStyle,fillRect 等;
使用 canvas 自带的 drawImage() 方法将图片画到 canvas 上
想取到压缩后图片的 base64 可以使用 canvas 自带的 toDataURL() 方法
完整代码
关于压缩后的图片大小
这里提供一个开箱即用的方法,baseStr 是一个 完整的 Base64 编码,就是包括
base64
代码:
在HTML5中怎么实现图片压缩的详细内容,希望对您有所帮助,信息来源于网络。