在绘制的过程中可能会需要文字换行
文字换行在我上篇文章,链接:文字换行.
之前写过一个分享海报,但是觉得代码逻辑不清晰所以重新写一个
我们的需求是这样子的
<view class="w-100 flex-column align-items-center" style="background:transparent !important;">
<canvas id="mycanvas" canvas-id="mycanvas" style="width:270px;height:390px;background:#fff;"></canvas>
<view @click="upLoadImg" >
保存图片
</view>
</view>
//canvas绘制部分
let ctx = uni.createCanvasContext('mycanvas', this); // 创建canvas对象
// 这里注意的是网络图片需要用 uni.getImageInfo() 函数去下载下来才能进行绘制
uni.getImageInfo({
src: _this.detail.image,
success(res) {
// 下面的ckjg_width jtjg_width的宽度需要写在所在save的之前不然用的是save之后的样式去计算的宽度
// 标题图片
ctx.drawImage('../../static/image/canvas/real_title.png', 0, 0, 270, 40);
// 小区图片
ctx.drawImage(res.path, 15, 50, 240, 120);
// 小区房子
ctx.setFontSize(16);
ctx.setFillStyle('#333333');
ctx.font = 'normal bold 20px sans-serif';
ctx.fillText(_this.detail.name, 15, 195, 240);
ctx.save();
// 小区地址
ctx.setFontSize(12);
ctx.setFillStyle('#4F4F4F');
ctx.fillText(_this.detail.city + ' ' + _this.detail.area + ' ' + _this.detail.address, 15, 220, 240);
ctx.save();
// 参考价格
ctx.setFontSize(12);
ctx.setFillStyle('#4F4F4F');
ctx.drawImage(res.path, 15, 50, 215, 110);
ctx.fillText('参考价格:', 15, 245, 240);
var ckjg_width = ctx.measureText('参考价格:').width;
ctx.save();
// 具体价格
ctx.setFontSize(18);
ctx.setFillStyle('#F2994A');
ctx.fillText(_this.detail.averagePrice, ckjg_width + 10, 245, 240);
var jtjg_width = ctx.measureText(_this.detail.averagePrice).width;
ctx.save();
// 长按识别
ctx.setFontSize(16);
ctx.setFillStyle('#333333');
ctx.fillText('长按识别', 15, 310, 215);
ctx.save();
// 长按识别
ctx.setFontSize(16);
ctx.setFillStyle('#333333');
ctx.fillText('小程序二维码', 15, 340, 215);
ctx.save();
// 二维码图片 (这里的二维码有可能需要小程序活码,需要活码的看21.10.10之后的文章,会分享小程序活码的案例)
ctx.drawImage('../../static/image/canvas/code.png', 160, 270, 100, 100);
// 这里是在信息绘制成功后去把canvas转换成图片保存起来
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
fileType: 'jpg',
success(r) {
_this.imgPath = r.tempFilePath;
},
fail(err) {
console.log(err, 'err');
}
});
}, 100);
ctx.draw();
console.log('绘制完成');
}
});
// 这里是点击保存图片按钮
// 用到了上面方法保存下来的图片路径
upLoadImg() {
var that = this;
uni.authorize({
scope: 'scope.writePhotosAlbum',
success(e) {
uni.saveImageToPhotosAlbum({
filePath: that.imgPath,
success: function(r) {
that.$u.toast('保存成功');
that.canvasShow = false;
},
fail: function(err) {
console.log(err, '方法错误');
}
});
},
fail: function(err) {
console.log(err, '权限错误');
}
});
},