由于在svg中引入的图标是使用的Image标签,根据href引入,而将svg转换为png/jpg等格式图片,大概过程是:首先将svg转换为canvas;然后将canvas保存为图片。在这个过程中href出现了问题,导致图片丢失,因为href是图片路径。经过查找解决方案后发现,绘制Image标签时href使用base64编码可以完美解决图片丢失的问题。
在解决问题前:
解决方案:
先把svg中所有的image标签的href图片路径转换为base64编码格式,再使用html2canvas进行截图。
html代码:
<div id="view">
<input type="button" value="截图" onclick="takeScreenshot()" />
<div style="width:300px;height:150px;background-image:url('https://file.huistone.com/project/2020/12/17/f981ace909cf4ec09af81351bf66e610/2.jpg');"></div>
<svg>
<image href="https://file.huistone.com/project/2020/12/17/f981ace909cf4ec09af81351bf66e610/2.jpg" style="width:100px;height:100px;"></image>
</svg>
</div>
JS代码:
function takeScreenshot() {
//将svg中所有的image标签href属性改为base64编码
var imgElem = $("#view").find('image');
imgElem.each(function (index, node) {
var img = node.getAttribute("href");
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = ()=>{
var base64 = getBase64Image(image);
node.setAttribute("href",base64); //更改href属性
}
})
//使用html2canvas进行截图(需要加定时器延迟操作)
setTimeout(()=>{
html2canvas(document.getElementById('view'), {
backgroundColor:"#fff",//画出来的图片有白色的边框,不要可设置背景为透明色(null)
useCORS: true,//支持图片跨域
logging: true, //Enable log (use Web Console for get Errors and Warnings)
}).then(canvas=>{
canvas.toDataURL() //- base64格式
$('#view').append(canvas) //也可进行下载
// 如果你需要下载截图,可以使用a标签进行下载
//let a = document.createElement('a');
//a.href = canvas.toDataURL();
//a.download = 'picture';
//a.click();
});
},100)
}
//图片地址转为base64编码
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}