vue使用html2canvas截取div内容生成海报~ vue生成海报

海报~ vue生成海报"/>

vue使用html2canvas截取div内容生成海报~ vue生成海报

最近项目有需求需要把生成海报。就在网上查了一些资源记录一下。
首先就是下载依赖了。老规矩：

npm i html2canvas

然后在需要的组件里面引用：

import html2canvas from 'html2canvas';

这个是我的html内容：有个下载按钮，div里面的是海报图和二维码。自己摆放好位置~
记得给div加个ref。

<el-dialog class="hb-dz" width="500px" :visible.sync="showView"><el-button class="download" @click="toImage" type="primary">下载海报</el-button><div class="poster-box" ref="pbox" id="p-box"><img class="b-img" :src="diaInfo.backUrl" /><img class="c-img" :src="diaInfo.qrcode" /></div>
</el-dialog>

下面就是方法啦：

toImage() {// 手动创建一个 canvas 标签const canvas = document.createElement('canvas');// 获取父标签，意思是这个标签内的 DOM 元素生成图片// imageTofile是给截图范围内的父级元素自定义的ref名称let canvasBox = this.$refs.pbox;// 获取父级的宽高const width = parseInt(window.getComputedStyle(canvasBox).width);const height = parseInt(window.getComputedStyle(canvasBox).height);// 宽高 * 2 并放大 2 倍 是为了防止图片模糊canvas.width = width * 2;canvas.height = height * 2;canvas.style.width = width + 'px';canvas.style.height = height + 'px';const context = canvas.getContext('2d');context.scale(2, 2);const options = {canvas: canvas,useCORS: true, // 【这个要打开。解决图片跨域的】=》我的评价是‘吊用没有’！};html2canvas(canvasBox, options).then((canvas) => {// toDataURL 图片格式转成 base64let dataURL = canvas.toDataURL('image/png');// 下面是创建a标签下载操作let a = document.createElement('a');a.href = dataURL;a.download = '海报';a.click();});
},

好了到这就结束了。还有个坑你得看看~
你要是生成的海报里面没有图片那就是可以了。我的里面有‘图片跨域’给我整的不会了。在网上各种查各种试都不行。还是得在服务器上配置一下图片跨域的问题。服务器设置过后需要浏览器清一下缓存。我的就是不清缓存还是跨域。解决服务器图片跨域的自行百度把~