如何使用canvas压缩图片大小(canvas,开发技术)

时间:2024-05-09 16:07:01 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

    %E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8canvas%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F

问题来源

这个问题,源于上传图片文件的时候,后台限制了2MB的大小,but在调起相机拍照的时候分分钟超过了2MB,为了不影响用户体验和功能需求,需要前端对大小进行压缩,然后传到后台。

思路分析

找了很多资料,发现只有canvas可以对图片进行压缩处理。

原理大概就是: 1、先将图片的file文件转成baseURL 2、创建一个image标签去接收文件获取图片的宽高和比例。 3、创建canvas画布设置画布的大小。 4、将图片绘制到canvas上面。 5、对canvas进行压缩处理,获得新的baseURL 6、将baseURL转化回文件。

前提的函数

将file文件转化为base64

将base64转化为文件流

压缩方法

方法使用

文件的size是按照字节,所以我们需要把要求的大小转化成字节。 1字节就是1byte就是1B,1KB = 1024B,1MB = 1024 * 1024B

本文:如何使用canvas压缩图片大小的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:c语言中的解释局部和全局作用域实例分析下一篇:

11 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18