准备工作
在开发中经常会遇到邀请或者分享页面需要生成海报分享,生成海报需要用到html2canvas插件,页面里一般都带有二维码,所以还需要一个生成二维码的插件,和一个弹出层组件,html2canvas插件通过npm install html2canvas --save
命令下载,二维码和弹出层可以在uniapp的插件市场搜索直接下载
生成二维码
二维码的生成需要一个canvas,设置canvas的id和宽高
<view class="qr_code">
<canvas canvas-id="qrcode" v-show="qrShow" style="width: 110rpx;height: 110rpx;"/>
</view>
我们需要进入邀请页面的时候就生成好了二维码,首先引入uqrcode.js文件,在created生命周期函数里调用uqrcode.js的方法,传入id,内容,大小,边距等等
import uQRCode from '../../../common/js/uqrcode.js'
created() {
this.qrcode('https://www.baidu.com/')//传入你要传入二维码的内容
},
methods:{
qrcode(text){
this.qrShow=true
uQRCode.make({
canvasId: 'qrcode',//canvas-id
componentInstance: this,
text: text,//二维码内容
size: 55,//二维码大小
margin: 0,//间距
backgroundColor: '#ffffff',//背景颜色
foregroundColor: '#000000',//二维码颜色
fileType: 'jpg',//文件类型
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
success: res => {
console.log(res);
}
})
},
}
ok,这样我们的二维码就出来了
复制链接
一般除了二维码还有邀请码,点击按钮实现复制邀请码,这个可以用uniapp内置的api,uni.setClipboardData()
<view class="contents">
<view class="text">
邀请码
</view>
<view class="code">
{{code}}
</view>
</view>
<button class="poster-btn" @click="copy(code)">复制邀请码</button>
//复制
copy(data){
uni.setClipboardData({
data,
success() {
console.log('success');
}
})
},
当我们点击复制的时候就会弹出弹窗提示
生成海报
一个简陋的页面大概就完成了
当我们点击生成海报按钮的时候就会将整个页面生成一张海报图片,先将下载好的html2canvas插件导入,然后传入相应的信息即可生成一张图片,但是这个插件需要传入id,但是在app端的话是操作不了dom的,对此,uniapp为我们提供了一个解决办法,让我们可以在app端操作dom:
renderjs可以在视图层操作dom,那么如何去使用renderjs呢?只需要新建一个script
节点,设置lang为renderjs,在这个renderjs里操作dom生成海报
//service层
<script>
export default {
}
</script>
//renderjs
<script module="canvas" lang="renderjs">
export default {
}
</script>
导入html2canvas插件,在生成海报的方法里使用document.getElementById()获取要生成海报区域的id传入html2canvas方法里生成canvas,在canvas对象里设置海报的一些属性,如:背景颜色,宽高等等,再使用canvas的toDataURL()转为base64格式的图片
<script module="canvas" lang="renderjs">
import html2canvas from "html2canvas"
export default {
methods:{
async toImage(event,ownerInstance){
try{
const timeout=setTimeout(async ()=> {
const htmlCanvas=document.getElementById('htmlCanvas')
const canvas=await html2canvas(htmlCanvas,{
backgroundColor: null,
useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
})
const url = canvas.toDataURL('image/png')
this.$ownerInstance.callMethod('creates',{//可以调用service层的方法
url
})
clearTimeout(timeout)
}, 500);
}catch(e){
//TODO handle the exception
console.log(e);
}
},
}
}
</script>
通过this.$ownerInstance.callMethod()
将生成好的base64格式的图片传给service层的方法
//生成海报
creates(options){
console.log(options);
this.imgUrl = options.url//用于展示海报
},
为了让海报显示出来,我们使用下载好弹出层组件,图片生成完成的时候弹出弹出层将图片展示出来,且可以分享到微信,朋友圈,qq等等选项,下面是我的生成海报的一个效果,具体的展示的样式和内容可以自行设置
关于分享的操作可以看看之前写的uniapp多端分享(app,小程序,公众号)这篇文章,不过海报生成只能在h5和app,小程序是不能生成的,因为renderjs不支持小程序端