UniApp 用canvas生成图片保存本地

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

<view class="select">
  <canvas canvas-id="myCanvas" id="myCanvas"/>
<view>

第二步：获取图片在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: '确定保存到相册吗',
                    success: (response) => {
                        uni.canvasToTempFilePath({
                            x: windowWidth / 2 - 150,
                            y: 0,
                            height: 300,
                            width: 300,
                            canvasId: 'myCanvas',
                            success: (response) => {
                                uni.saveImageToPhotosAlbum({
                                    filePath: response.tempFilePath,
                                    success: (response) => {
                                     console.log(response);
                                    },
                                    fail: (response) => {
                                     uni.openSetting({
                                        success: (response) => {
                                            if(!response.authSetting['scope.writePhotosAlbum']) {
                                                nui.showModal({
                                                    title: '提示',
                                                    content: '获取权限成功，再次点击图片即可保存',
                                                    showCancel: false
                                                })
                                            } else {
                                                nui.showModal({
                                                    title: '提示',
                                                    content: '获取权限失败，无法保存',
                                                    showCancel: false
                                                })
                                            }
                                        }
                                     })
                                    }
                                })
                            },
                            fail: (response) => {
                                console.log(response);
                            }
                        }, this);
                    }
                })

uni.canvasToTempFilePath({},this)这个方法要加this，在APP端，uni.canvasToTempFilePath方法需要放在convasContext.draw的回调里面，否则会一直报canvas is empty。
做完这些就已经保存到本地了