html2canvas（将dom转换为画布） canvas

以下是依赖于html2canvas生成的海报效果，亲测有效
以一张背景图+二维码的布局为例
【html2canvas（将dom转换为画布）】html部分：

文章图片文章图片

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

css部分

.creat-img { width: 300px; position: relative; height: 300px; img { width: 100%; height: 100%; z-index: 3; } .qrcode { position: absolute; bottom: 0rem; left: 75%; margin-left: -64px; z-index: 5; } }

注意：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...