生成海报图和二维码,
如果是vue的话,先下载两个插件QRCode和html2canvas
html
//海报html元素放这个标签内
<div id="posterHtml" v-show="true"></div>
<!-- 海报图 -->
<div class="posterImg" v-show="posterShow">
<img :src="posterImg" alt />
</div>
js
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
data() {
return {
posterImg: "", // 最终生成的海报图片
posterShow: false,
}}
methods:
//text就是你要生成二维码的链接
createQrcode(text) {
// 生成二维码
const qrcodeImgEl = document.getElementById("qrcodeImg");
qrcodeImgEl.innerHTML = "";
let qrcode = new QRCode(qrcodeImgEl, {
width: 115,
height: 115,
colorDark: "#000000",
colorLight: "#ffffff",
margin: "auto",
correctLevel: QRCode.CorrectLevel.H,
});
qrcode.makeCode(text);
},
createPoster() {
// 生成海报
const vm = this;
const domObj = document.getElementById("posterHtml");
html2canvas(domObj, {
useCORS: true,
allowTaint: false,
logging: false,
letterRendering: true,
onclone(doc) {
let e = doc.querySelector("#posterHtml");
e.style.display = "block";
},
}).then(function (canvas) {
// 在微信里,可长按保存或转发
vm.posterImg = canvas.toDataURL("image/png");
vm.posterShow = true;
console.log(vm.posterImg);
});
},
效果图:
css 就不给大家上了,毕竟你的设计图也不会跟我的不一样。
有问题可以在下方评论。