1.安装 html2canvas
npm i -D html2canvas
2.文件中使用
//html代码
<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
<div class="image_tofile" ref="imageDemo">
<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
</div>
<button @click="toImage">点击生成图片</button>
<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl">
//js代码
// 引入html2canvas
import html2canvas from 'html2canvas'
// 注册组件
components: {
html2canvas
},
data () {
return {
htmlUrl: '' // 存放生成图片的地址
}
},
methods: {
// 页面元素转图片
toImage () {
this.$indicator.open({
text: '正在生成图片...',
spinnerType: 'fading-circle'
});
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageDemo, {
backgroundColor: null, //设置截图的背景色
useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
allowTaint: false, //允许跨域（图片跨域相关）
taintTest: true, //是否在渲染前测试图片
}).then((canvas) => {
let url = canvas.toDataURL('image/png')
this.htmlUrl = url
setTimeout(() => {
this.$indicator.close();
this.$toast({
message: '图片已生成，长按保存分享给你的好友吧',
position: 'middle',
duration: 3000
});
}, 500)
})
},
}
遇到的问题：
1.生成的图片空白
问题描述：在列表页面，根据不同的商品ID生成对应的截图，截图空白或错位的问题
解决办法:设置canvas的宽高
//html文件
<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
<div class="image_tofile" ref="imageDemo">
<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
根据循环的列表生成不同的内容，即对应索引的 item 内容
</div>
<ul class="day_goods">
<li class="day_item" v-for="(item,i) in goodsList" :key="i">
<!--循环生成的内容 -->
<button @click="toImage(item)">点击生成图片</button>
</li>
</ul>
<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl">
//js文件
toImage (item) {
this.goodsDetail=item; // 要动态获取内容
//生成图片
this.$indicator.open({
text: '正在生成图片...',
spinnerType: 'fading-circle'
});
setTimeout(()=>{ // 因为要动态获取内容，所以加了一个定时器
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageDom, {
useCORS: true, //（图片跨域相关）
allowTaint: false, //允许跨域（图片跨域相关）
taintTest: true, //是否在渲染前测试图片
width:window.screen.availWidth, //显示的canvas窗口的宽度
height:window.screen.availHeight, //显示的canvas窗口的高度
windowWidth:document.body.scrollWidth, // 获取X轴方向滚动条中的内容
windowHeight:document.body.scrollHeight, // 获取Y轴方向滚动条中的内容
x:0, // 页面在X轴上没有滚动，故设为0
y:window.pageYOffset, // 页面在垂直方向的滚动距离
}).then((canvas) => {
......
},2000)
},
2.生成的图片需带有二维码
- 安装 qrcanvas
npm i -D qrcanvas
- 页面中使用
toImage (item) {
this.goodsDetail=item; // 要动态获取内容
//生成二维码
let codeUrl='www.baidu.com' //二维码地址url地址
var canvas1 = qrcanvas({
data: decodeURIComponent(codeUrl),
size: 90
});
document.getElementById("qrcode").innerHTML = '';
document.getElementById('qrcode').appendChild(canvas1);
//合成分享图
this.$indicator.open({
text: '正在生成图片...',
spinnerType: 'fading-circle'
});
//截图
setTimeout( ()=>{
......
},2000)
},
