版权声明:小奶狗 https://blog.csdn.net/weixin_42827683/article/details/82155290
由于项目需求的原因,认真查阅了浏览器中图片下载的有关资料,总结了几个部分。
1. SVG另存为PNG格式
在IE中,貌似只能通过鼠标右键点击SVG来把SVG另存为PNG保存到本地。
在非IE浏览器中,则可以通过以下代码来实现:
let serializer = new XMLSerializer(),
//把一个 XML 文档或 Node 对象转化或“序列化”为未解析的 XML 标记的一个字符串
source = serializer.serializeToString(svg.node());
//把svg转换为一个字符串
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
//把SVG变成了data数据流
let canvas = document.createElement("canvas");//创建一个canvas标签
canvas.width = width;
canvas.height = height;
let context = canvas.getContext("2d");//在画布上二维绘图
let image = new Image();//创建一个新的image标签
image.src = url;
image.onload = function () {
context.drawImage(image, 0, 0);//在canvas中画出image
var a = document.createElement("a");
a.download = "svg.png";//这是图片的名字,a.download属性不被IE支持
a.href = canvas.toDataURL();//把canvas的数据转换成base64编码
a.click();
};
也可以利用canvg.js(把SVG转换成canvas)这个插件来实现,代码如下:
//记得引入canvg.js文件或者npm下载下来
let canvas = document.createElement("canvas");
canvas.width = 720;//这个根据你的实际需求来
canvas.height = 720;
canvg(canvas,svgHTML);//canvg.js里面的函数,作用是把svg变成canvas
//canvas是你要存放canvas的容器我这里用的就是一个canvas标签,svgHTML是你要转换的SVG这个标签
var a = document.createElement("a");
a.download = "svg.png";
a.href = canvas.toDataURL();//canvas.toDataURL()在IE中会报安全错误,应该是因为跨域的问题
a.click();
2. canvas另存为PNG图片
if(!!window.ActiveXObject || "ActiveXObject" in window){
// IE浏览器;
let blob = canvas.msToBlob();
//canvas是你页面中的要另存为PNG图片的canvas标签,.msToBlob()是IE浏览器的行为,原本是canvas.toBlob()。
window.navigator.msSaveBlob(blob, 'svg.png');
//这个则是IE的Blob数据的存储方法
}else{
// 非IE浏览器;
var a = document.createElement("a");
a.download = "svg.png";
a.href = canvas.toDataURL();
a.click();
}