JS中图片压缩的方法小结(js canvas压缩图片)

推荐整理分享JS中图片压缩的方法小结(js canvas压缩图片)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js 压缩图片大小,js图片压缩算法,js 压缩图片大小,js如何压缩图片,js 压缩图片大小,js 压缩图片大小,js 压缩图片,js 压缩图片大小,内容如对您有帮助，希望把文章链接给更多的朋友！

首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base字符串压缩之后再变为base字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；面对这么多的需求，王二索性画了一张图：

Alt text

二、解决办法

如上图所示，王二一共写了七个方法，基本覆盖了JS中大部分文件类型的转换与压缩，其中：

1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数，代码如下：

2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下：

3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数;代码如下：

这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JavaScript 原生形式的数据。 File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档

4、 canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量;代码如下：

其中的 toDataURL API可以参考MDN文档

5、 filetoDataURL(file,fn) 会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下：

6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：

7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下：

三、进一步封装

对于常用的将一个 File 对象压缩之后再变为 File 对象,我们可以将上面的方法再封装一下，参考如下代码：

其中， file 参数传入一个 File （ Blob ）类型文件； quality 参数传入一个 0-1 的 number 类型，表示图片压缩质量； fn 为回调方法，包含一个 Blob 类型文件的参数。

它使用起来就像下面这样：

这样的话，图片压缩上传就能轻松地搞定了，以上的8个方法我已经封装好放到 github 上了，喜欢的话可以使劲的star哈。

参考文档：

MDN

ps：下面看下JS等比压缩图片的办法

总结

以上所述是小编给大家介绍的JS中图片压缩的方法小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！

JS实现获取汉字首字母拼音、全拼音及混拼音的方法 本文实例讲述了JS实现获取汉字首字母拼音、全拼音及混拼音的方法。分享给大家供大家参考，具体如下：这里需要用到一个js获取汉字拼音的插件，可

cordova入门基础教程及使用中遇到的一些问题总结 前言现在做项目为了节约成功，适配多平台cordova不为是一个很好的选择。个人觉得以后也许是一个趋势！像一些知名的APP比如支付宝淘宝好多都大量集

JavaScript函数绑定用法实例分析 本文实例讲述了JavaScript函数绑定。分享给大家供大家参考，具体如下：Perface如果让你实现这个页面和一些操作的，比如点击1、2、3等就在那个inputtext中