uni-app完成保存大图分享到朋友圈

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，画布的高度是根据获取到的主图的高度、二维码的高度进行自适应的

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！