h5 生成海报图和生成二维码

生成海报图和二维码，
如果是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 就不给大家上了，毕竟你的设计图也不会跟我的不一样。

有问题可以在下方评论。