位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享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文档

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

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中

标签: js canvas压缩图片

本文链接地址:https://www.jiuchutong.com/biancheng/369788.html 转载请保留说明!

上一篇:js精确的加减乘除实例(js 加减)

下一篇:JS实现获取汉字首字母拼音、全拼音及混拼音的方法(js获取中文拼音)

  • 股票印花税如何计算
  • 金税盘软件
  • 计提无形资产摊销额计入什么科目
  • 企业上缴税费总额怎么算
  • 其他应收款怎样做平
  • 旅游公司如何缴费
  • 非营利机构注册要求
  • 营业账簿是什么意思
  • 企业清算需要什么
  • 厂家试驾车和经销商试驾车
  • 结转本期各项收入
  • 建总账的注意事项
  • 应交税费期初数比期末数大
  • 发票融资贷款应该怎么做账?
  • 员工罚款如何入账
  • 企业生产设备产品有哪些
  • 企业交补充医疗保险
  • 绿化工程上税多少
  • 上月税没报,可以开发票吗
  • 计提印花税怎么做凭证
  • 进口车关税怎么抵扣
  • 电厂采购通常采购什么
  • 酒店预收款是什么意思
  • 小规模企业低值易耗品摊销方法
  • 金银制成的金银币及摆件是否征收消费税?
  • 银行承兑电子汇票到期要怎么操作
  • win7系统打开软件就停止工作
  • 福利费不需要发票
  • php怎么把图片存入mysql
  • php中的header函数
  • 保证金结息的会计分录
  • 增值税留抵退税政策2023
  • php缓存数据到内存
  • 分配水电费会计分录需要写税吗?
  • Symfony2实现在controller中获取url的方法
  • 房地产开发企业会计制度
  • 科技型中小企业享受优惠税收政策
  • php函数传值的引用是什么
  • php array合并
  • 转让金融商品应交增值税计算公式
  • 无偿调出固定资产账面价值为零如何处理
  • 性能优化模式
  • 网上报税流程演示2019
  • 销售折扣购物卡怎么做账
  • 费用化支出期末一般转入哪个账户?
  • 比赛奖金怎么做账
  • 工程合同主要看什么
  • 新会计准则基本准则
  • 边际贡献分析法案例
  • PostgreSQL教程(十八):客户端命令(2)
  • 公司收到社保局的提醒函怎么办
  • 故障的机器修好多少钱
  • 贷款利息收入如何计算
  • 流动资产属于经营资产还是得经营资产
  • 销售加工费怎么记账
  • 资产折旧的计税基础
  • 冲销预付账款后怎么做账
  • 计提应付票据利息10000的会计分录
  • 进项税额的ppt
  • xp系统弹出广告怎么处理
  • ie标签页
  • windows vista home basic
  • 教你设置陌陌耳返
  • 解决口苦最快的方法
  • ubuntu18.04启用root
  • mac苹果电脑如何开4个微信号
  • win10相机桌面快捷方式
  • win7系统的图片
  • 光纤拨号方式
  • Android OpenGL ES(一)----必备知识
  • android应用程序的主要语言是java
  • css控制图片置灰
  • 转义字符对应英文
  • rsa加密算法python
  • jQuery simpleModal插件的使用介绍
  • python数据操作
  • jquery使用教程
  • 广州市税务局官网电话
  • 江西国家税务局电子税务局
  • 税务筹划怎么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设