在vue 中使用html2canvas 遇到的坑
文档: html2canvas.hertzen.com/features
坑1 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使用百分比,使用固定宽度,避免缩放问题
坑2 !! 不要使用背景图片 , 可能是我点背,,,主要是这引起的报错
建议使用最新版
<div v-longpress="convert2canvas" :class="['moon-detail_block',this.$mn.Code]" id="shareContent" ref="referee">
<div class="referee_wrap" :style="moon_Referee_obj">
<img :src="currentSrc" alt="">
<div class="referee_header" flex="cross:center dir:top">
<div class="referee_tit">
送你一张万能服
</div>
<div class="qrCode">
</div>
<div class="con">
</div>
</div>
</div>
</div>
复制代码
methods
convert2canvas(e) {
console.log(e, "eeee,C2222222222CANVEWFW");
console.log(this.$refs.referee, "refs");
console.log(this.$mount, "mout");
var shareContent = document.getElementById("shareContent"); // 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使用百分比,使用固定宽度,避免缩放问题
var width = shareContent.offsetWidth; // 获取(原生)dom 宽度
var height = shareContent.offsetHeight; // 获取(原生)dom 高
var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量
var canvas = document.createElement("canvas"); //创建canvas 对象
var context = canvas.getContext("2d");
var scaleBy = this.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度,居中,所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题,由于顶部有个距离所以要加上顶部的距离,解决图像高度偏移问题
context.scale(scaleBy, scaleBy);
var opts = {
allowTaint: true, //允许加载跨域的图片
tainttest: true, //检测每张图片都已经加载完成
scale: scaleBy, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关,发布的时候记得改成false
width: width, //dom 原始宽度
height: height //dom 原始高度
};
html2canvas(shareContent, opts).then(function(canvas) {
console.log("html2canvas");
console.log(canvas, "222222");
var body = document.getElementsByTagName("body");
body[0].appendChild(canvas);
});
},
//获取像素密度
getPixelRatio: function(context) {
var backingStore =
context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio ||
1;
return (window.devicePixelRatio || 1) / backingStore;
},
复制代码
mounted() {
this.convert2canvas();
},
复制代码
长按指令
directives: {
longpress: {
inserted: function(el) {
console.log(el, "longpress");
},
bind: function(el, binding, vNode) {
console.log(vNode, "bind");
let pressTimer = null;
// 定义函数处理程序
// 创建计时器( 1秒后执行函数 )
let start = e => {
console.log(e, "eeeeeee");
if (e.type === "click" && e.button !== 0) {
return;
}
if (pressTimer === null) {
pressTimer = setTimeout(() => {
// 执行函数 长按
handler();
}, 1000);
}
};
// 取消计时器
let cancel = e => {
// 检查计时器是否有值
if (pressTimer !== null) {
clearTimeout(pressTimer);
pressTimer = null;
}
};
// 运行函数
const handler = e => {
// 执行传递给指令的方法
console.log(binding, "binding");
binding.value(e);
};
// 添加事件监听器
el.addEventListener("mousedown", start);
el.addEventListener("touchstart", start);
// 取消计时器
el.addEventListener("click", cancel);
el.addEventListener("mouseout", cancel);
el.addEventListener("touchend", cancel);
el.addEventListener("touchcancel", cancel);
}
}
},
复制代码
所有评论(0)