vue中使用html2canvas生成海报

需求: 用户选一张背景图然后生成个性化海报 海报背景图片为用户所选 海报右下角加用户分享二维码 左下角加用户头像 长按可将海报分享给好友

首先安装 html2canvas 浏览器兼容等更多细节详见 html2canvas 配置查看html2canvas: configuration--配置

npm install --save html2canvas

页面引入

import html2canvas from "html2canvas"; 

先组装海报 下面是示例代码

   <div class="poster" id="poster">
    <!-- 背景图 -->
    <img src="">
    <!-- 头像 -->
    <img src="">
    <!-- 二维码 -->
    <img src="">
   </div>
   <div>
    <img :src="posterUrl" />
   </div>

生成海报图片

    html2canvas(document.getElementById("poster"), {
            allowTaint: false, // 允许跨越图片绘制
            useCORS: true
          })
            .then(canvas => {
              let posterUrl = canvas.toDataURL("image/png");
            })
            .catch(err => {
              console.log("err", err)
            });

需要注意的是海报dom必须可见才能生成图片不然是白屏的 可以使用fixed定位将#poster的left设为-9999px 让它待在角落 我们只需要生成的base64显示图片即可 这样在微信手机端就可以长按图片分享给好友