分享海报图片的方式,以前再RN端采用的是截图方案, 我记得组件好像是
react-native-view-shot
现在要处理uni-app的海报图片分享, 一般也有
html2canvas
的相关插件
不过其缺点也有,
比如说遇到bug,有时候没办法修改什么的
手绘canvas虽然麻烦,但是胜在自由灵活
canvas使用记录
先看下实际效果图
绘制流程及思路
其实使用下来发现, canvas绘制和iOS原生开发进行UI绘制有很多相似之处, 比如draw的入参 ,都需要x
,y
坐标,设置width/height等
整个canvas绘制的思路如下
0.绘制整个大矩形背景 : 通过uni.downloadFile
下载网络图片来获取tempFilePath
, 结合几个坐标和宽高参数, 就可以绘制了
1. 绘制头像, 通过drawImage
来绘制
不过这里需要注意的是, 如果要对头像图片进行裁剪,比如圆心之类的
需要用到clip
的情况下,
需要提前保存好上下文画布
// 2.顶部头像
ctx.save(); // 先保存之前的画布
ctx.beginPath()
ctx.arc((200 + 190 / 2) * scaleNum, (60 + 190 / 2) * scaleNum, 190 / 2 * scaleNum, 0,
Math.PI * 2)
ctx.clip()
ctx.drawImage(this.headUrl, 200 * scaleNum, 60 * scaleNum, 190 * scaleNum, 190 *
scaleNum)
(200: 左边间距)
(190: 圆的直径)
(60: top的间距)
(这里需要注意的事, 圆的圆心坐标, 是相对于x/y坐标的哦 )
2.绘制文字部分
这个没有太大的问题, 不过要注意下 textAlign
的具体用法
具体代码
- html部分
<canvas :style="{width: boxDetail.width +'px', height: boxDetail.height + 'px' }"
id="sharePic" canvas-id="sharePic"></canvas>
2.js部分
setCanvasSize() {
const query = uni.createSelectorQuery().in(this);
query.select('#content').boundingClientRect(data => {
this.boxDetail.width = data.width
this.boxDetail.height = data.height
console.log(this.boxDetail, data)
this.$nextTick(() => {
setTimeout(() => {
console.log('create and set canvas')
this.createCanvas()
// this.asyncAwaitCanvas()
},<