Dom元素转图片都是用canvas来实现的(常用于营销图的制作,自定义图片合成等需求) 推荐使用html2canvas来实现 html2canvas文档
第一步安装
npm install html2canvas --save
第二步在需要使用的页面引入
import html2canvas from "html2canvas"
第三部构建
----html
<div class="canvas_box" id="mycanvas" ref="mycanvas">
//里面放置图片等元素(需要合成到图片里的元素)
</div>
//还需要一个合成按钮
<button @click="saveImg('mycanvas')">合 成</button>
-----methods
saveImg(val) {
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
// 先获取你要转换为img的dom节点
var node = document.getElementById(val);//传入的id名称
// console.log("node", node);
var width = node.offsetWidth; //dom宽
var height = node.offsetHeight; //dom高
var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
html2canvas(node, {
width: width,
heigth: height,
backgroundColor: "#ffffff", //背景颜色 为null是透明
dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
scale: scale,
X: 0,
Y: 0,
scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
scrollY: 0,
useCORS: true, //是否使用CORS从服务器加载图像 !!!
allowTaint: true //是否允许跨域图像污染画布 !!!
}).then(canvas => {
// console.log("canvas", canvas);
var url = canvas.toDataURL(); //这里上面不设值cors会报错
var a = document.createElement("a");//创建一个a标签 用来下载
a.download = "营销图"; //设置下载的图片名称
var event = new MouseEvent("click");//增加一个点击事件
a.href = url;//此处的url为base64格式的图片资源
a.dispatchEvent(event); //触发a的单击事件 即可完成下载
});
},
特别注意: 如果元素内有网络图片地址 即服务器路径要给图片dom设置行内 crossOrigin='Anonymous’ !!!
另外有些css样式不支持导出 如文字超出盒子显示…等 导出就为空白 具体查看文档 更换元素css设置再导出