胖蔡说技术
随便扯扯

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;
        }

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

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » JS中通过canvas实现图片格式的转换
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏