22 行 JS 写个图片格式转换器-优快云博客

介绍了一种使用JavaScript将WebP格式图片转换为JPEG的方法，通过创建一个canvas元素并利用其上下文绘制图片，最终导出为所需格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然国内大厂（豆瓣、微信公众平台等）已支持 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日

作者：南漂一卒

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