JS中通过canvas实现图片格式的转换

对于图片格式的修改，通过后端修改可以通过引用相关工具包实现图片格式的修改，但当我们想通过JS来实现图片格式的转换的话，我们改如何实现昵？本文介绍在JS中通过canvas来实现图片格式的转换功能。

其实现原理就是通过canvas绘制指定格式图片，步骤分为两步：首先是将源图片转换成canvas，然后通过canvas绘制指定图片格式文件

图片转canvas

首先可以通过加载获取图片的base64编码，其获取代码可参考：《js实现图片的下载》，如下为base64转为canvas对象：

        // 将base64 转换为 canvas对象 
        function imgToCanvas(dataURL) {
          var canvas = document.createElement("canvas");
          var image = new Image();
          image.src = dataURL;
          canvas.width = image.width;
          canvas.height = image.height;
          canvas.getContext("2d").drawImage(image, 0, 0);
          return canvas;
        }

canvas绘制图片

JS中的canvas提供了一个转换方法：toDataURL，我们可以通过该方法实现指定输出图片的格式，代码如下：

        //canvas转换为image
        function canvasToImg(canvas, mimetype) {
          var src = canvas.toDataURL(mimetype);
          return src;
        }

若只是简单的需要转换图片格式，你也可以访问：《在线图片格式转换器》，这是一个在线转换图片格式的工具。