JS压缩图片,在线图片压缩,Cavas压缩图片
在线DEMOhttps://oktools.net/tinyimg
1. 选择一张图片
const img_original = document.getElementById('img_original'); const img_output = document.getElementById('img_output'); let blob; function preview(file) { let reader = new FileReader(); reader.onload = function () { img_original.src = this.result; img_original.onload = () => { console.log('图片原始宽高:', img_original.naturalWidth, img_original.naturalHeight); console.log('图片原始大小:', file.size) } }; reader.readAsDataURL(file); }
2. 使用Canvas压缩
function compress() { // 压缩到图片原始宽高的一半 let w = img_original.naturalWidth / 2; let h = img_original.naturalHeight / 2; let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); let anw = document.createAttribute("width"); anw.nodeValue = w; let anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.fillRect(0, 0, w, h); ctx.drawImage(img_original, 0, 0, w, h); const base64 = canvas.toDataURL('image/jpeg', 0.75);// 压缩后质量 const bytes = window.atob(base64.split(',')[1]); const ab = new ArrayBuffer(bytes.length); const ia = new Uint8Array(ab); for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } blob = new Blob([ab], {type: 'image/jpeg'}); console.log('压缩后的图片大小', blob.size); // 预览压缩后的图片 img_output.src = base64 }
3. 保存到本地
function save() { if (blob) { let a = document.createElement('a'); let event = new MouseEvent('click'); a.download = Math.round(new Date() / 1000) + '.jpg'; a.href = URL.createObjectURL(blob); a.dispatchEvent(event) } }
在线DEMO https://oktools.net/tinyimg
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
LeetCode 20:有效的括号 Valid Parentheses
给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid. 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 An input string is valid if: Open brackets must be closed by the same type of brackets. Open brackets must be closed in the correct order. 注意空字符串可被认为是有效字符串。 Note that an empty string is also considered valid. 示例 1: 输入: "()" 输出: true 示例 2: 输入: "()[]{}" 输出: true 示例 3: 输入: "(]" 输出: false 示例 4...
- 下一篇
安装conda、Anaconda后终端出现的(base)字样去除方法
conda|Anaconda 安装之后终端每次显示一个base字样让强迫症十分不爽! 方法 conda deactivate在终端数据conda deactivate 或者在.bash_profile 文件中加入。当然(base)消失了,conda的python也用不了了,变成了默认的python2.7那就使用方法2吧 condarc 可以通过.condarc文件来控制显示(此文件在~/.condarc下)When using conda activate, change the command prompt from $PS1 to include the activated environment. The default is True.EXAMPLE: changeps1: False vi ~/.condarc在文件最后加入 changeps1: False 如下(前3行是本来就有的,不用管它) ssl_verify: true channels: - defaults changeps1: False 保存退出,重启终端就会发现讨厌的(base)字段消失了 试一下,pyth...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS7设置SWAP分区,小内存服务器的救世主
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Docker安装Oracle12C,快速搭建Oracle学习环境