22 行 JS 写个图片格式转换器

简介:

虽然国内大厂(豆瓣、微信公众平台 等)已支持 Google 推出的 WebP 图片格式来进一步优化性能,但其它多数软件平台还是只支持 BMP、GIF、JPEG、PNG 等经典格式,有时临时找个支持 WebP 的图片格式转换器也挺麻烦的,不如抄起键盘就是一把梭~


通用源码

(function () {

    var canvas = document.createElement('canvas');

    var context2D = canvas.getContext('2d');

    self.convertImage = function (image, format) {

        context2D.clearRect(0, 0, canvas.width, canvas.height);

        canvas.width = image.naturalWidth;

        canvas.height = image.naturalHeight;

        image.crossOrigin = "Anonymous";

        context2D.drawImage(image, 0, 0);

        return  canvas.toDataURL('image/' + (format || 'png'),  1);
    };

})();

基本用法

直接用 Google Chrome™ 调试器的 Source Snippets(源码片段)功能运行 ——

94f01e3c47586248175dd14c104e926afb9adfbe

若有跨域相关报错,可自行访问该图片的服务器首页,用自创的 <img src="path/to/image" /> 加载待转换图片 ——

780f7ce0e69bea708752306438e76a7d167a9053

my_img.src = convertImage(my_img, 'jpeg');

上述代码运行完毕后,网页右键菜单中的图片另存为功能保存的就是 JPEG 格式的图片。

原文发布时间:2018年03月07日

作者:南漂一卒 

本文来源:开源中国  如需转载请联系原作者

目录
相关文章
|
5月前
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识: 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息,帮助用户更好地理解文档内容的属性。 2. 版权保护: 在文档中添加水印可以帮助保护内容的版权,防止他人未经授权地复制、转载或篡改内容。 3. 安全保护: 对于敏感信息或机密文档,添加水印可以帮助防止信息泄露,提高文档的安全性。 4. 提升专业性: 在一些场景下,如商业报告、合同文件等,添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝: 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
69 1
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
|
JavaScript
js 选取table中checkbox选中行的某一列
js 选取table中checkbox选中行的某一列
100 0
|
JSON JavaScript 前端开发
JS案例:如何用300行原生js代码写出高大上的购物车
JS案例:如何用300行原生js代码写出高大上的购物车
279 0
JS案例:如何用300行原生js代码写出高大上的购物车
|
前端开发 JavaScript
前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)
前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)
173 0
|
前端开发 JavaScript
【70行JavaScript代码实现除夕夜倒计时 零基础也能学会~
70行代码实现除夕夜倒计时 零基础也能会
268 0
【70行JavaScript代码实现除夕夜倒计时 零基础也能学会~
|
自然语言处理 JavaScript 前端开发
【图文详解】200行JS代码,带你实现代码编译器(人人都能学会) 下
【图文详解】200行JS代码,带你实现代码编译器(人人都能学会) 下
170 0
|
自然语言处理 JavaScript 前端开发
【图文详解】200行JS代码,带你实现代码编译器(人人都能学会) 上
【图文详解】200行JS代码,带你实现代码编译器(人人都能学会) 上
358 0
|
自然语言处理 前端开发 JavaScript
用25行JavaScript语句实现一个简单的编译器
用25行JavaScript语句实现一个简单的编译器
141 0
|
机器学习/深度学习 JavaScript 前端开发
微软行星云计算Planetary Computer——定了用python作为主要语言,告别GEE的JavaScript痛苦!
微软行星云计算Planetary Computer——定了用python作为主要语言,告别GEE的JavaScript痛苦!
409 0
微软行星云计算Planetary Computer——定了用python作为主要语言,告别GEE的JavaScript痛苦!
|
JavaScript 前端开发
使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
119 0