1 为处理svg,需引入canvg.js 下载链接:https://github.com/canvg/canvg
//以下是对svg的处理
var svgElem = $('#div_id').find('svg');
svgElem.each(function (index, node) {
//获取svg的父节点
var parentNode = node.parentNode;
//获取svg的html代码
var svg = node.outerHTML.trim();
//创建一个<canvas>,用于放置转换后的元素
var canvas = document.createElement('canvas');
//将svg元素转换为canvas元素
canvgv2(canvas, svg);
//设置新canvas元素的位置
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
//删除svg元素
parentNode.removeChild(node);
//增加canvas元素
parentNode.appendChild(canvas);
});
2 引入 html2canvas
下载链接:https://github.com/niklasvh/html2canvas
new html2canvas(document.getElementById('div_id'), {
x: 0,//解决滚动对导出位置的影响
y: 0
}).then(canvas => {
if ($('#image_div').length === 0) {
$('body').append('<a id="image_div" download="图片.jpg">');
}
var img = canvas.toDataURL("image/jpeg")
img = img.replace('data:image/jpeg;base64,', '')
var finalImageSrc = 'data:image/jpeg;base64,' + img
$('#image_div').attr('href', finalImageSrc)
$('#image_div')[0].click()
$('#image_div').remove()
});