标签：
<canvas id="myCanvas" type="2d" canvas-id="myCanvas" style="background-color: #7bb1f4;width: 750rpx;"></canvas>
<image :src="testImgUrl" mode="aspectFill" style="width: 100%; height: 100px"></image>方法：
drawCanvas() {
this.ctx = uni.createCanvasContext('myCanvas')
// begin path
this.ctx.rect(10, 10, 100, 30)
this.ctx.setFillStyle('yellow')
this.ctx.fill()
// begin another path
this.ctx.beginPath()
this.ctx.rect(10, 40, 100, 30)
// only fill this rect, not in current path
this.ctx.setFillStyle('blue')
this.ctx.fillRect(10, 70, 100, 30)
this.ctx.rect(10, 100, 100, 30)
// it will fill current path
this.ctx.setFillStyle('red')
this.ctx.fill();
// this.ctx.draw();
this.ctx.draw(false, res => {
console.log('绘制成功', res)
setTimeout( () => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 375,
height: uni.upx2px(1020),
// destWidth: 375,
fileType: 'jpg' , // 'png'
// destHeight: uni.upx2px(1020),
canvasId: 'myCanvas',
success: (res) => {
console.log('canvasToTempFilePath', res)
this.testImgUrl = res.tempFilePath;
const imgurl = res.tempFilePath;
var that = this;
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success: function(res2) {
console.log('saveImageToPhotosAlbum success', res2)
console.log('save success',res2);
uni.showToast({
title:'保存成功',
icon: 'none'
})
},
fail(res) {
console.log('保存失败', res)
}
});
},
fail(e) {
console.log(e);
uni.showToast({
title: '生成图片失败',
icon: 'none'
});
},
complete(res) {
console.log('canvasToTempFilePath结束', res)
}
}, this)
},5000)
},this)
}
1***@qq.com
请问解决了吗，我也碰到了这个问题
2020-12-02 11:27