好的我们开始,uniapp绘制海报进行保存是我们经常需要制作的功能。而绘制海报,我们一般会绘制图片,绘制文字,绘制截取图片。
下面让我们来看下绘制一个海报的具体过程。
初始化画布(这里的this必不可少,否则在某些情况下会产生绘制失败的bug)
<canvas class="canvas" canvas-id="myCanvas"></canvas> const ctx =
uni.createCanvasContext('myCanvas',this);
1、首先我们需要绘制图片
在canvas上绘制图片。我们需要用到一下代码
ctx.drawImage( 图片路径 , x轴位置 , y轴位置 , 宽度 , 高度 ); //绘制图
而该方法只支持绘制本地图片,包括本地临时文件。
所以当你要绘制一张网络图片时,
小程序端和app端getImageInfo得到的返回信息不同。
你需要使用到以下代码方法:
new Promise(resolve => {
uni.getImageInfo({
src: '网络图片',
success(res)
ctx.drawImage(res.path, 0, 0, 244 * 1.22, 429 * 1.22);//绘制图
resolve()
} ,
fail(){
_this.canvasFlag=true;
uni.showToast({title:'海报生成失败',duration:2000,icon:'none'});
}
})
})
通过该方法将将网络图片转成本地临时文件路径(App才能转成本地临时路径),然后然后再执行ctx.drawImage()方法进行绘制。
我这边使用到了promise是为了在图片绘制完后在绘制文字,好我们进行下一步。
2、绘制文字
ctx.setFillStyle('#999999')//文字颜色:默认黑色
ctx.setFontSize(12)//设置字体大小,默认10
ctx.textAlign = 'center' // 设置位置
ctx.font = 'normal 12px sans-serif'; // 字体样式
ctx.fillText(文字内容 , 宽度, 高度);
3、最后执行绘制方法
ctx.draw()
到这我们就已经完成绘制。
4、保存画布
uni.canvasToTempFilePath({ // 把画布转化成临时文件
x: 0,
y: 0,
width:244 * 1.22, // 截取的画布的宽
height: 429 * 1.22, // 截取的画布的高
destWidth: 244 * 1.22 * 3, // 保存成的画布宽度
destHeight: 429 * 1.22 * 3, // 保存成的画布高度
fileType: 'jpg', // 保存成的文件类型
quality: 1, // 图片质量
canvasId: 'myCanvas', // 画布ID
success(res) {
// 2-保存图片至相册
uni.saveImageToPhotosAlbum({ // 存成图片至手机
filePath: res.tempFilePath,
success(res2) {
wx.hideLoading();
uni.showToast({title: '图片保存成功,可以去分享啦~', duration: 2000})
_this.canvasCancelEvn();
},
fail(res3) {
if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
_this.$store.dispatch('SetPhoneShow',1)
uni.showToast({title: '保存失败,稍后再试', duration: 2000,icon:'none'})
wx.hideLoading();
}else{
uni.showToast({title: '保存失败,稍后再试', duration: 2000,icon:'none'})
wx.hideLoading();
}
}
})
},
fail() {
uni.showToast({title: '保存失败,稍后再试',duration: 2000,icon:'none'})
wx.hideLoading();
}
})
5、这里详细讲一下一些方法的具体功能和细节
1、绘制方法
ctx.draw()
这个方法是绘制方法,在你绘图或者绘制文字结束后需要调用该方法,你所做的操作才能绘制到canvas标签上。
担有几个注意的点,首先.draw()会先清空canvas标签上绘制图案,draw(true)就能够保存canvas上已经绘制绘制完成的内容,然后继续绘制。
ctx.draw(true, () => {
// 方法内容
})
ctx.draw()方法第二个参数可以设置一个回调方法,在绘制完后进行方法体中的内容操作。
例如进行:canvas的截取等等。
2、canvas区域截取区域,绘制。常用于绘制圆形头像会用到。
截取区域前需要使用.save()方法进行之前画布区域的保存,然后.clip()截取后进行你想要的操作,操作完后使用.restore()对画布区域进行恢复。
ctx.save() // 对当前画布区域进行保存
ctx.clip() // 剪切,剪切之后的绘画绘制剪切区域内进行,需要save与restore 这个很重要 不然没办法保存
ctx.restore() // 对画布区域进行恢复
3、
ctx.measureText('文字').width // 获取该段字符串在canvas上的宽度,用于短句。