vue中使用html2canvas,
import html2canvas from "html2canvas"
<div ref="posterWrap"></div>
//生成海报
makePoster: function(){
var that = this;
var postDialog = this.$refs.posterWrap; //需要截图的包裹的(原生的)DOM 对象
var width = postDialog.offsetWidth; //获取dom 宽度
var height = postDialog.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
var content = canvas.getContext("2d");
content.scale(scale, scale); //获取context,设置scale
var rect = postDialog.getBoundingClientRect();//获取元素相对于视察的偏移量
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// content.translate(-rect.left,-rect.top); //设置context位置,值为相对于视窗的偏移量负值,让图片复位
content.translate(0,-scrollTop); //这里是为了适应页面滚动时,所以设置为页面滚动的高度的负数
var opts = {
scale: 0.999, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关,便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(postDialog,opts).then(function(canvas) {
var dataURL = canvas.toDataURL("image/png");
console.log(dataURL)
});
}
关键点: 在opts里的scale,设置成1不行,设置成0.75可以,但是截取的图片大小不对,设置成0.999即可