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();});
},

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

vue使用html2canvas截取div内容生成海报~ vue生成海报相关推荐

利用html2canvas截取div保存为png图片并下载
Html2canvas是什么? 是一个脚本这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100%的准确度,因为它 ...
Vue 插件 html2canvas 将页面内容生成图片
官网:http://html2canvas.hertzen.com/ * 使用 1.安装: npm install --save html2canvas 2.引入: import html2canva ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
vue 生成二维码海报并进行微信分享
插件:Vue Canvas Poster 网址:Vue Canvas Poster 1.安装 cnpm i vue-canvas-poster --save 2.使用 <template> ...
H5页面使用html2canvas实现div生成为图片，保存到手机
在做微信公众号H5页面时,需求要求html页面生成base64图片,并保存到手机相册中.之前没做过,在网上搜了相关的资料.了解到了html2canvas.js. html2canvas首先将页面生成c ...
使用html2canvas保存html或者div内容为图片及自定义名称
使用html2canvas保存html或者div内容为图片及自定义名称,测试可用 <div id="first" style="width: 90%;height: ...
解决-使用html2canvas截取页面时，页面的div背景图无法截取并跨域
今天在研究html2canvas截取页面的时候,发现截取后的图片没有把应该截取元素的背景图片截掉,背景图片空白.此时谷歌浏览器控制台报Failed to load resource: net::ERR ...
Vue脚手架html2canvas生成图片
下载插件 npm install html2canvas@1.0.0-rc.4 --save 页面引入 import html2canvas from "html2canvas" ...
小程序海报和H5海报生成
小程序海报和H5海报海报一.Canvas用法二.小程序海报 1. 小程序的canvas 2.使用示例 3.结果三.H5海报 1.安装插件html2canvas 2.使用示例 3.结果总结海 ...

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

vue使用html2canvas截取div内容生成海报~ vue生成海报相关推荐

最新文章

热门文章