话不多说直接上代码
首先确定好要被截图的div ,注意里面放 img 不要用 div 的 background-image 不然截图模糊的问题不能用以下代码解决
<div id="imageWrapper">
// 这里是要被截图的div
// 确保这里都是image,不要用 div 的 background-image
// 不然截图模糊的问题无法用以下代码解决
// 多张图片的定位自己用 position 解决
<img src="xxxxxxx" />
<img src="xxxxxxx" />
</div>
<div id="canvasDiv" >
<img style="width:100%;height:100%;" class="real_pic" :src="dataURL" />
</div>
我这里参考了网上的代码,先放大,再缩小
toImage() {
var shareContent = document.getElementById('imageWrapper');//需要截图的包裹的(原生的)DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = window.devicePixelRatio; //定义任意放大倍数 支持小数
// var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.getContext("2d").scale(scale,scale); //获取context,设置scale
var opts = {
// dpi: window.devicePixelRatio * 2,
scale: scale , // 添加的scale 参数
useCORS: true,
canvas:canvas, //自定义 canvas
logging: true, //日志开关
// width: width, //dom 原始宽度
// height: height, //dom 原始高度
// backgroundColor: 'null',
};
var self = this;
this.$html2canvas(shareContent, opts).then(function (canvas) {
var IMAGE_URL = canvas.toDataURL("image/png");
self.dataURL = IMAGE_URL;
})
},
总结:起初我用的 background-img ,不然我怎样设置,截图出来都是模糊的,后来也是google了一下,才发现了这个问题,div不要用背景图,要放img进去。耗了不少时间,不过总算是解决了