直接保存图片

woshishui099

已于 2022-08-04 13:33:27 修改

阅读量246

点赞数

分类专栏： vue 文章标签： vue javascript

于 2022-03-18 16:17:11 首次发布

本文链接：https://blog.csdn.net/woshishui099/article/details/123577806

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

//采用直接转成canvas的方式
let width = 1000;
let height = 666;
var serializer = new XMLSerializer();
var source = ‘<?xml version="1.0" standalone="no"?>\r\n’+serializer.serializeToString()
var image = new Image();
image.src = “data:image/svg+xml;charset=utf-8,” + encodeURIComponent(source);
console.log(image.src)
var canvas = document.createElement(“canvas”);
canvas.width = width;
canvas.height = height;
var context = canvas.getContext(“2d”)
context.fillStyle = ‘#fff’; //背景颜色
context.fillRect(0,0,10000,10000)
image.onload = function(){
context.drawImage(image, 0, 0);
var a = document.createElement(“a”);
a.download = “aaaa.png”;
a.href = canvas.toDataURL(‘image/png’);
a.click();
}