位置: 编程技术 - 正文

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获取中文拼音)

  • 一般纳税人做账流程图
  • 济南非税是什么意思
  • 以前年度多交增值税
  • 三项经费包括在哪些内容
  • 期间费用的界定
  • 会费要交增值税吗
  • 代开增值税票普票专票税点一样吗
  • 新公司注册资金需要实缴吗
  • 行政单位拨给下属单位经费会计分录
  • 所得税汇算清缴调整项目
  • 消费税计算视频讲解
  • 资产总额和净资产总额的区别
  • 汇算清缴报错了怎么更正
  • 收到转账支票 转给下一家
  • 企业确定无法支付的
  • 增值税降税让利给谁
  • 季度财务报表怎么打印
  • 存货清查的账务处理的阐述
  • 政府购买缴纳社保吗
  • 一般纳税人购买原材料会计分录
  • win10怎么手动修改时间
  • 个体户需要交钱吗
  • 电脑管家lol修复
  • php 字符串
  • 回迁安置房开发商可以出售吗
  • lsalss.exe
  • 实际发放股票股利为什么股本增加
  • 注销库存股的会计分录怎么理解
  • 黑马程序员前端工程师简历
  • 怎么用云服务
  • 固定资产清理科目余额结转哪里
  • php数组数据结构
  • ntpdate 命令
  • 使用ChatGPT进行AI对话
  • 收到税务局信息
  • python里面的类
  • vue使用百度地图md5报错
  • cgroup限制内存
  • 建筑企业营改增之前计税方法
  • 工会经费能不能用于体检
  • sql查询语句怎么用
  • 一般纳税人增值税结转账务处理
  • 个体工商户实收资本可以填0吗
  • 售后租回交易的表述
  • 收到退留抵税额会计分录
  • 发票信息不一致是怎么回事
  • 自查时发现以前的事情
  • 福利费属于管理费用还是销售费用
  • 合资公司政策
  • 确定固定资产的标准
  • 费用利润率的意思
  • 企业支付的技术转让费计入管理费用吗
  • 企业流动负债比率多少算正常
  • mysql理论知识
  • mysql8.0免安装
  • 由于这台计算机没有远程客户端访问许可证
  • linux系统讲解
  • linux系统的安装与配置
  • wlms.exe是什么
  • 开启linux系统路由转发功能的语句
  • win8 网络连接
  • win7的库是什么
  • linux isolcpus
  • three. js
  • jquery实现select选择框内容左右移动代码分享
  • nodejs示例
  • ie在支持ftp的功能方面
  • 页面滚动到底部
  • unity3d动画系统
  • js dom方法
  • unity多人联机服务器客户端
  • jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
  • 重庆车辆检测费多少钱
  • 免租期算租赁期限吗
  • 从价计征和从租计征的区别,有什么优缺点
  • 纳税人在国外签字流程
  • 医生算是公务员吗?
  • 创新税务稽查方案
  • 出口退税额与出口退税收入
  • 车辆过户给自己家人
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设