html2canvas：将dom转换为画布

以下是依赖于html2canvas生成的海报效果，亲测有效

以一张背景图+二维码的布局为例

html部分：

大致是share-img这个盒子用来存放最终生成的canvas海报
creat-img盒子是存放原始dom背景图和二维码的结构布局，下边通过html2canvas将其转换为画布海报

js部分：

css部分

注意：html2canvas绘制的时候要加跨域处理，否则绘制出的图片为空白的：加上
{ allowTaint: false, useCORS: true }
即

      html2canvas(that.$refs.box, { allowTaint: false, useCORS: true }).then(
        function (canvas) {
          that.imgUrl = URL.createObjectURL(
            that.base64ToBlob(canvas.toDataURL())
          );
          // ios的话会存在还未加载完就进行绘制，若为ios则放到定时器里执行
          // setTimeout(() => {}, 2000);
        }
      );

原文参考链接https://blog.csdn.net/zuorish...