canvas 导出为图片兼容ie10+，谷歌，火狐等浏览器，代码
2022-05-11 本文已影响0人
阿巳交不起水电费
效果图：
image.png
导出效果：
image.png
如果canvas设置了背景色，导出的图片就不是透明的了，如：
image.png
代码如下，里面详细写了注释，可以快速看懂：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button id="btn">导出图片</button>
<br/>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas
标签。
</canvas>
</body>
<script>
// base64转blob
function base64ToBlob(code) {
// 截取base64的数据内容（去掉前面的描述信息，类似这样的一段：data:image/png;base64,）
var parts = code.split(";base64,");
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]); // 解码为2进制数据
var rawLength = raw.length; // 获取解码后的二进制数据的长度，用于后面创建二进制数据容器
// 创建一个Uint8Array类型的数组以存放二进制数据
var uInt8Array = new Uint8Array(rawLength);
// 将二进制数据存入Uint8Array类型的数组中
while (rawLength--) {
uInt8Array[rawLength] = raw.charCodeAt(rawLength)
}
// 创建blob对象
return new Blob([uInt8Array], {type: contentType});
}
// 下载图片
function downLoad(url, name) {
var a = document.createElement('a')
a.href = url
a.setAttribute('download', name)
// a.setAttribute('target', '_blank')
// a.click() // 在safari下不行。safari下的A标签默认是没有绑定事件的 Safari不支持非button元素的click事件
document.body.appendChild(a); // 火狐浏览器必须追加到body里面
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
a.dispatchEvent(e);
a && document.body.removeChild(a)
}
// 下载方式一：ie浏览器使用 canvas.toDataURL("image/png") + window.navigator.msSaveOrOpenBlob 方法
function canvas2Img() {
var canvas = document.getElementById('myCanvas')
var name = 'canvas 下载'
// console.log(canvas.toDataURL())
var base64Url = canvas.toDataURL("image/png") // 因为canvas.toDataURL()兼容ie 9+，canvas.toBlob()只兼容ie10+【其中ie还需要加前缀ms,即使用canvas.msToBlob()】 因此这里选选择canvas.toDataURL()这个方法
if (window.navigator.msSaveOrOpenBlob) {//ie浏览器
// var imgData = canvas.msToBlob();
// var blobObj = new Blob([imgData]);
// console.log(blobObj, 555)
// window.navigator.msSaveOrOpenBlob(blobObj, name + '.png');
// window.navigator.msSaveBlob 只能保存，而window.navigator.msSaveOrOpenBlob 有保存和打开两个选项
window.navigator.msSaveOrOpenBlob(base64ToBlob(base64Url), name + '.png');
} else { //谷歌火狐浏览器
downLoad(base64Url, name);
}
}
// 下载方式一：ie浏览器使用 canvas.msToBlob + window.navigator.msSaveOrOpenBlob 方法
function canvas2Img2() {
var canvas = document.getElementById('myCanvas')
var name = 'canvas 下载'
// console.log(canvas.toDataURL())
var base64Url = canvas.toDataURL("image/png") // 因为canvas.toDataURL()兼容ie 9+，canvas.toBlob()只兼容ie10+【其中ie还需要加前缀ms,即使用canvas.msToBlob()】 因此这里选选择canvas.toDataURL()这个方法
if (window.navigator.msSaveOrOpenBlob) {//ie浏览器
var imgData = canvas.msToBlob();
var blobObj = new Blob([imgData]);
// console.log(blobObj, 555)
window.navigator.msSaveOrOpenBlob(blobObj, name + '.png');
} else { //谷歌火狐浏览器
downLoad(base64Url, name);
}
}
// 绑定点击
var btn = document.querySelector('#btn');
btn.onclick = function () {
// canvas2Img()
canvas2Img2()
};
// canvas 绘制
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, c.width, c.height);
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
</html>
下面有几个api需要注意下：
canvas.toDataURL()
image.png
可以看到此api兼容ie9+
canvas.toBlob()
image.png
注意此api兼容的是ie10+，而且注意看兼容ie10的时候还有个标记，这个标记的意思是在ie10中需要加ms前缀，因此代码里面是这样调用的var imgData = canvas.msToBlob();【注意这里msToBlob不是用的callback方式，而是直接赋值的】
image.png
window.navigator.msSaveBlob 与 window.navigator.msSaveOrOpenBlob 的区别
两个其实差不多，只是window.navigator.msSaveBlob 只能保存，而window.navigator.msSaveOrOpenBlob 有保存和打开两个选项
我在代码中提供了两种下载方式，两个方法主要针对ie浏览器的处理方式不同，canvas2Img需要结合base64ToBlob方法，而canvas2Img2不用。若能解决ie 9下载base64图片的问题，那么推荐使用canvas2Img，不能解决或者没必要兼容ie9的，那么推荐使用canvas2Img2。
若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/9b3ad5bc131c，转载请注明出处，谢谢。
参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
https://www.yisu.com/zixun/658160.html
https://www.jianshu.com/p/9b3ad5bc131c
