最近更新博客没有那么频繁了，一是公司的项目时间紧，而且在这个项目中遇到了个小问题一直没有解决，昨天刚把问题解决了，特来记录下过程。
产品需求是这样的，安卓和ios点击分享按钮，有一项是保存图片，本来是说要让app自主开发的，结果他们时间紧任务重，自然就想到了由H5来开发，这样安卓和ios就可以共用一套。分享的商品详情图片上有基本的商品信息、商品图片以及一张h5的二维码。先说下技术选型吧，二维码就交给qrcode.js了，生成图片的功能用的是html2canvas，这个选定了就一点点的踩坑了。
因为项目是vue脚手架搭建的，首先要安装依赖qrcode和heml2canvas1
2npm install qrcode --save
npm install html2canvas --save
接下来在页面中引用qrcode和html2canvas1
2import html2canvas from 'html2canvas';
import QRCode from 'qrcodejs2'
页面html的代码如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<template>
<div id="share" ref="share">
<!--页面显示的内容-->
<div class="share-area">
<p class="share-top">今日待售！</p>
<p>{{detail.address}}</p>
<p>{{detail.category_type_name}}{{detail.weight}}</p>
<img :src="img" class="share-img"/>
<div id="qrcode"></div>
<p class="share-img-tip">扫描二维码查看详情并报价</p>
<p @click="createCanvas" class="save-img" v-if="isCanvas">点击生成图片</p>
</div>
<!--生成截图后展示的部分-->
<div class="canvas-mask" v-show="showImg">
<div class="canvas"><img class="img" :src="qrContentImage" crossOrigin="anonymous" alt="" /></div>
<p class="tip">长按图片保存至相册</p>
</div>
</div>
</template>
js部分1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44data(){
return{
qrContentImage:'',
showImg:false,
isCanvas:true,
img:'',
detail:{},
}
},
methods: {
getData(id){
//这里调用从后台获取商品数据的接口，返回的数据赋值给this.detail
this.img = this.detail.images
},
qrcode (text) { //生成二维码
let qrcode = new QRCode('qrcode', {
width: 138,
height: 138, // 高度
text: text // 二维码内容
})
},
createCanvas() {
this.isCanvas = false
this.$nextTick(() => {
var canvas2 = document.createElemen('canvas');
//此处是一个坑，最好在页面上定义一个元素，然后在此获取这个dom节点，再去获取到宽高，网上搜到很多用直接创建的canvas元素来获取宽高，结果宽高都为0，导致画图不成功的问题
let tar = document.querySelecto('.canvas');
var w = parseIn(window.getComputedStyle(tar).width);
var h = parseIn(window.getComputedStyle(tar).height;
var context = canvas2.getContex('2d');
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + 'rem';
canvas2.style.height = h + 'rem';
context.scale(2, 2);//图片或者文字不清晰可以调整缩放倍数，本项目用到的调整为二倍，保存的图片和文字已经很清晰了
html2canvas(document.querySelecto('#share'), {
useCORS: true,//此处为允许图片跨域，但是也需要你们项目的图片服务器上允许跨域
}).then(canvas => {
this.qrContentImage =canvas.toDataURL('image/jpg');
this.showImg = true
});
});
}
},
这里只介绍了html2canvas将页面生成图片的方法，但是因为是用canvas来实现的画图，所以会涉及到图片跨域的问题，html2canvas官网提供了一些中间件的方法，我没有尝试，我的解决办法是将跨域的图片在执行画图前先转换为base64格式的图片流，这样就不会出现跨域问题了。关于将图片转换为base64格式下一篇博客会记录实现方式。