js截屏（日常需求）
2020-04-02 本文已影响0人
在下高姓
今天遇到一个需求，就是把分享海报通过微信，完整的分享出去，首先这个分享海报是由两部分组成，一个是海报本身，一个是带参数的二维码，由于后端没有拼接，所以分享出去的只是单独的二维码，
一
首先，我就知道我还做不到单凭前端技术完成两张图片无缝拼接；但是遇到问题总不能放任不管吧，于是牺牲了我一顿中午饭和午休；可能是我搜索的关键词不对，并没有所收获，既然技术不到位，就只好另辟蹊径
二
我想到的第一种方法是给img标签设置背景图片，在通过定位和设置大小达到预定我位置；当我以为可以解决问题的时候；给img标签加入src的时候底层的背景色就被遮挡了。z_index也没效果，显然是失败了
三
紧接着，我想到了::after和::before伪类；虽然视觉上是达到了效果，但是我去看页面渲染的代码时，demo显然是两个节点；
如果能和上一种方法互补一下就好了，然后又继续发散我的思维，
四
最后，既然我不可能给他写一个拼接图片的功能；那就只好避重就轻，对就是截屏，但不是用户主动自己截屏，这样会很反感，然后又是一顿百度，结果还是没找到原生的方法调用移动端截屏的方法，所幸发现了一个插件html2canvas可以截屏，因为第一次用，也不知道效果，简单创建了一个html，最爱的copy环节到了，下载好插件包，引入，再把copy的代码调整；果然可以，然后就放入自己的项目里面；具体代码如下：
1.首先引入下载好的js插件
<script src="../../js/html2canvas.js"></script>
2.然后创建demo：
<!-- 截屏demo 需要注意ref是必须的 -->
<div class="huod" ref="imageDemo" :style="{backgroundImage: 'url(' + activityImg + ')'}">
<img :src="fileurl" alt="">
</div>
<!-- 截屏容器 -->
<img id="demo" :src="htmlUrl">
3.操作节点
toImage () {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageDemo, {
backgroundColor: null, //设置截图的背景色
useCORS: true, // 解决文件跨域问题
allowTaint: false, //允许跨域
taintTest: true, //是否在渲染前测试图片
}).then((canvas) => {
let url = canvas.toDataURL('image/png');//指定转换格式可不填
this.htmlUrl = url;
//提示弹窗
alert(截屏成成功）
})
},
4.调用方法,我用的是vue框架，只需要在生命周期调用就是了
mounted:function () {
this.toImage ()
}
