vue使⽤html2canvas⽣成海报过程中遇到的坑，及⽣成⼆维码⽂章⽬录
html2canvas
最终效果图
安装
cnpm install html2canvas
页⾯引⼊
import html2canvas from "html2canvas";
1：因需求要点击⽣成就已经成为的图⽚，⽽html2canvas对于display为none的⽣产不了解决⽅法：在需要⽣成海报的页⾯，布局好海报的html样式，并设置z-index: -1
2：使⽤上⾯那样的⽅式，当页⾯滚动⼀些距离后，⽣成的图⽚不完整
解决⽅法：
data() {
return {
dataImg: "",
scrollVal: 200,
};
},
// 创建海报
createPoster() {
const me = this;
// 当页⾯滚动⼀些距离后，⽣成的图⽚不完整，在⽣成⽅法⾥⾯加下⾯this.scrollVal 折⾏代码
this.scrollVal =
document.documentElement.scrollTop || document.body.scrollTop;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
const poster = ElementById("canvasPoster");
html2canvas(poster, {
// dpi: window.devicePixelRatio * 2,
// backgroundColor: "#fff",
// useCORS: true,//允许加载跨域的图⽚
allowTaint: true, //允许跨域图⽚
taintTest: false //是否在渲染前检测每张图⽚都已经加载完成
}).then(canvas => {
this.dataImg = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
});
},
2.1关于图⽚跨域（有两种情况）
1.服务端没有对图⽚做任何处理，就是上⾯的代码就⾏
svg和canvas的区别2.如果服务端对图⽚进⾏了处理，图⽚格式如下图：
则需要注意两点：
img标签不能有crossOrigin=“anonymous”
useCORS: true,//这个属性需要打开
2.2注意：在关闭模态框需要重置滚动条
//关闭模态框触发
closePicModal() {
document.body.scrollTop = this.scrollVal;
document.documentElement.scrollTop = this.scrollVal;
}
3：也可以在进⼊页⾯的时候，加载完成后就调⽤⽣成图⽚，并把图⽚传⼊模态框，打开的时候直接显⽰
// 创建海报
createPoster() {
const me = this;
this.scrollVal =
document.documentElement.scrollTop || document.body.scrollTop;  document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
const poster = ElementById("canvasPoster");
html2canvas(poster, {
// dpi: window.devicePixelRatio * 2,
// backgroundColor: "#fff",
// useCORS: true,//允许加载跨域的图⽚
allowTaint: true, //允许跨域图⽚
taintTest: false //是否在渲染前检测每张图⽚都已经加载完成
}).then(canvas => {
this.dataImg = canvas
.
toDataURL("image/png")
.replace("image/png", "image/octet-stream");
//pc端扫码过来，直接打开模态框
if (me.saveUrl == "webGo") {
let getTimestamp = new Date().getTime();
}
});
},
4：关于内容省略号问题
我是直接把⽂章的内容获取到，判断长度，增加的省略号
因为是Markdown的内容，所以是根据P标签的内容拼接的
5：关于边框阴影问题
开始是⽤的阴影图⽚，改布局，最后发现在不同⼿机的适配效果很差，改源码也⿇烦，最后改了海报样式⼆维码
安装
cnpm install  qrcodejs2 --save
页⾯引⼊
import QRCode from "qrcodejs2";
crateQrcode() {
this.qr = new QRCode(this.$refs.qrcode, {
width: 46,
height: 46, // ⾼度
text: this.qrcode // ⼆维码内容
// render: 'canvas' // 设置渲染⽅式（有两种⽅式 table和canvas，默认是canvas）
// background: '#f0f'
// foreground: '#ff0'
});
// console.log(this.qrcode)
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。