小程序 -- 点击canvas生成图片并保存实践

229 阅读1分钟

小程序 -- 点击canvas生成图片并保存实践

小程序保存图片流程如下

  • 查询是否授权过写入图片的权限 ⬇️
  • 授权失败打开熟悉系统设置、拒绝授权提示重新点击 ⬇️
  • canvas绘制 ⬇️
  • canvas转本地临时图片 ⬇️
  • 本地临时图片保存到手机相册 ✅

view

<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;" canvas-id="canvas"></canvas>
<view bindtap="saveImg" class="">
    <text>生成海报</text>
</view>

data

data: {
    imageWidth: 750,
    imageHeight: 1239,    
}

全部方法

saveImg(){
        wx.showLoading({
            title: '授权中',
        })
        wx.getSetting({
            success: (res) => {
                console.log('res')
                console.log(res)
                if (!res.authSetting['scope.writePhotosAlbum']) {
                    console.log('authorize')
                    // 未授权,授权中
                    wx.authorize({
                        scope:'scope.writePhotosAlbum',
                        success: () => {
                            console.log('授权成功')
                            this.createImg()
                        },
                        fail(err){
                            wx.openSetting({
                                success: (res) => {
                                    console.log(res)
                                    console.log(err)
                                    wx.hideLoading()
                                    wx.showToast({
                                        title: '请重新授权',
                                        icon: 'none'
                                    })
                                },
                                fail: () => {
                                    wx.hideLoading()
                                    wx.showToast({
                                        title: '异常,请重新授权',
                                        icon: 'none'
                                    })
                                }
                            })
                        }
                    })
                // 已经授权
                }else{
                    this.createImg() 
                }
            }
        })
    },
    createImg(){
        wx.hideLoading()
        this.drawCanvas()

        var imageWidth = this.data.imageWidth
        var imageHeight = this.data.imageHeight
        
        wx.canvasToTempFilePath({     //将canvas生成图片
            canvasId: 'canvas',
            x: 0,
            y: 0,
            width: imageWidth,
            height: imageHeight,
            destWidth: imageWidth,     //截取canvas的宽度
            destHeight: imageHeight,   //截取canvas的高度
            success: (res) => {
                wx.saveImageToPhotosAlbum({  //保存图片到相册
                    filePath: res.tempFilePath,
                    success: () => {
                        wx.showToast({
                            title: "海报已保存到相册",
                            duration: 2000
                        })
                    }
                })
            }
        })
    }, 
    drawCanvas(){
        // 使用 wx.createContext 获取绘图上下文 context
        var context = wx.createCanvasContext('canvas')

        context.setStrokeStyle("#00ff00")
        context.setLineWidth(5)
        context.rect(0, 0, 200, 200)
        context.stroke()
        context.setStrokeStyle("#ff0000")
        context.setLineWidth(2)
        context.moveTo(160, 100)
        context.arc(100, 100, 60, 0, 2 * Math.PI, true)
        context.moveTo(140, 100)
        context.arc(100, 100, 40, 0, Math.PI, false)
        context.moveTo(85, 80)
        context.arc(80, 80, 5, 0, 2 * Math.PI, true)
        context.moveTo(125, 80)
        context.arc(120, 80, 5, 0, 2 * Math.PI, true)
        context.stroke()
        context.draw()
    },

注意

  • 使用authorize之后不会弹出授权,那是没有在失败里面设置打开系统设置。

效果

--完--