对于图片格式的修改，通过后端修改可以通过引用相关工具包实现图片格式的修改，但当我们想通过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;
}原文始发于微信公众号（胖蔡话前端）：JS中通过canvas实现图片格式的转换
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/223169.html
