uni保存canvas图片_UniApp 用canvas生成图片保存本地

第一步：先定义一个canvas标签，如下。

第二步：获取图片在view中的高度和宽度，uni获取高度和宽度的方法，如下。

let view = uni.createSelectorQuery().in(this);

view.select('#myCanvas').boundingClientRect(response => {}).exec()；

response中就会返回一个指定的标签的宽高，还有一些top、buttom，的值。

第三步：生成canvas的图片，代码如下。

uni.getImageInfo({

src: this.image,

success: (response) => {

const canvas = uni.createCanvasContext('myCanvas', this);

const windowWidth = wx.getSystemInfoSync().windowWidth;

canvas.clearRect(0, 0, windowWidth, 300);

canvas.drawImage(response.path, 0, 0, 200, 200);

canvas.draw();

}

})

this.image：这个就是你要生成的图片。

第四步：把生成的canvas图片保存到本地，如下。

uni.showModal({

title: '提示',

content: '