canvas简单画布-保存大图分享到朋友圈
这篇博客记录的是使用uni-app完成微信小程序开发的时候需要使用canvas进行大图海报的绘制以及进行图片的保存。
好了,我这人比较懒,啥都不说了直接上代码了:
const ctx = uni.createCanvasContext('myCanvas');
ctx.beginPath()
// 填充整块画布背景(白)色
ctx.rect(0, 0, 画布宽度, 画布高度)
ctx.setFillStyle('#004D39')
ctx.fill()
ctx.save()//保存当前的绘图上下文
ctx.beginPath()//开始创建一个路径
ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.fill()
ctx.clip()//裁剪
ctx.drawImage('你的图片地址', 50, 50, 100, 100)//绘制图片
//ctx.save()//保存当前的绘图上下文
ctx.restore()//恢复之前保存的绘图上下文
// 绘制文本信息-商品分享人
ctx.setFontSize(40)
ctx.setFillStyle('#D1B285')
ctx.setTextAlign('left')
ctx.fillText('随便的文字', 180, 120)
// 绘制文本信息-分享说明
ctx.setFontSize(40)
ctx.setFillStyle('#D1B285')
ctx.setTextAlign('right')
ctx.fillText('推荐了一个宝贝', 画布宽度 - 50, 180)
ctx.beginPath()
// 绘制主图
ctx.drawImage(that.canvasPath, 0, 210, 画布宽度, that.canvasHeight)
// 绘制文本信息-标注商品名称
ctx.setFontSize(40)
ctx.setFillStyle('#004D39')
ctx.setTextAlign('right')
ctx.fillText(that.list1.ProductName, 画布宽度 - 50, that.canvasHeight + 130)
// 绘制文本信息-标注商品价格
ctx.setFontSize(35)
ctx.setFillStyle('red')
ctx.setTextAlign('right')
ctx.fillText('¥', 画布宽度 - 210, that.canvasHeight + 190)
// 绘制文本信息-标注商品价格
ctx.setFontSize(50)
ctx.setFillStyle('red')
ctx.setTextAlign('right')
ctx.fillText(that.list1.Price, 画布宽度 - 50, that.canvasHeight + 190)
// 绘制文本信息-标注小程序名字
ctx.setFontSize(50)
ctx.setFillStyle('#D1B285')
ctx.setTextAlign('left')
ctx.fillText(uni.getStorageSync('storeinfor').name + '小程序', 50, that.canvasHeight + that.qrHeight / 3 + 210)
// 绘制文本信息-长按识别
ctx.setFontSize(40)
ctx.setFillStyle('#D1B285')
ctx.setTextAlign('left')
ctx.fillText('长按识别二维码,查看商品', 50, that.canvasHeight + that.qrHeight / 3 + 280)
// 绘制文本信息-价格说明
ctx.setFontSize(30)
ctx.setFillStyle('#D1B285')
ctx.setTextAlign('left')
ctx.fillText('注:价格和促销以商品详情页为准', 50, that.canvasHeight + that.qrHeight / 3 + 340)
// 绘制二维码
ctx.drawImage(that.qrPath, 画布宽度 - that.qrWidth - 20, that.canvasHeight + 230, that.qrWidth, that.qrHeight);
ctx.save();
ctx.beginPath();
ctx.draw(false,
setTimeout(function() {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 画布宽度,
height: that.VisualHeight,
destWidth: 画布宽度,
destHeight: that.VisualHeight,
quality: Number(1),
canvasId: 'myCanvas',
success: function(res) {
that.filePath = res.tempFilePath;
console.log('合成成功!');
console.log(res.tempFilePath);
},
fail: function(res) {
console.log('合成失败!');
},
complete: function(res) {
uni.hideLoading();
}
})
}, 200)
)
功能是很简单的,就是定位置与文字的字体大小稍稍要花点时间,具体的可以看代码里的注释以及官网提供的API文档。
PS:画布的宽度为1080px,画布的高度是根据获取到的主图的高度、二维码的高度进行自适应的