html
<view class="canvasBox wth100" >
<!-- <image :src="saveimg" mode="widthFix"></image> -->
<canvas canvas-id="shareCanvas" style="width:100%;height: 410px;" v-if="canvas" ></canvas>
</view>
<view class="tc mt40">
<button class="cu-btn bg-purple wth50" @click="save">保存图片</button>
</view>
methods
画布
picture(){ //合成海报
let _this = this;
let p1 = new Promise(function (resolve, reject) {
//获得图片路径
uni.getImageInfo({
src:_this.imgurl+_this.goodslist.zhutupian,
success(res) {
resolve(res);
}
})
}).then(res => {
const ctx = uni.createCanvasContext('shareCanvas',_this);
ctx.fillStyle="#FFFFFF"
ctx.fillRect(0,0,370,410) //绘制背景图
ctx.drawImage(res.path, 0, 0, 375, 300); //图片
ctx.setFillStyle('#000000') // 文字颜色：黑色
ctx.setFontSize(16) // 文字字号：16px
ctx.fillText(_this.goodslist.mingchen, 10, 340) //开始绘制文本的 x/y 坐标位置（相对于画布）
ctx.setFillStyle('#E31013')
ctx.setFontSize(20)
ctx.fillText("￥"+_this.goodslist.qianggoujia, 10, 380) //开始绘制文本的 x/y 坐标位置（相对于画布）
ctx.drawImage(res.path, 240, 310, 90, 90); //图片
ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
ctx.draw(false,_this.drawPicture());//draw()的回调函数
})
},
drawPicture() {
var _this=this//生成图片
setTimeout(function(){
uni.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
x: 0,
y: 0,
width: 375,
height: 410,
destWidth: 750, //输出的图片的宽度（写成width的两倍，生成的图片则更清晰）
destHeight: 820,
canvasId: 'shareCanvas',
success: function (res) {
_this.saveimg=res.tempFilePath
},
fail(erro) {
}
},_this)//
},3000)
clearTimeout()
},
保存图片
save(){
var _this=this
uni.saveImageToPhotosAlbum({
filePath: _this.saveimg,
success: function () {
_this.Show('保存成功')
}
});
},
