小程序 生成canvas图片并下载保存

    html:
    <button bindtap="saveImg">    <button>
    <canvas canvas-id="myCanvas" class="canvasIs"/>
    
    css:
    .canvasIs{
    width:1080px;
    height:1643px;
    position:fixed;
    left:9000px;
}

	 js:
    Page({
            data: {
                img: " 需要的背景图片",
            },
            onLoad: function() {
            		let _this = this
    	   			 //需要注意的是：我们展示图片的域名需要在后台downfile进行配置，并且画到canvas里面前需要先下载存储到data里面
    	            //先下载下来背景
    	            wx.downloadFile({
    	                url: _this.data.img,
    	                success: function(res) {
    	                    //console.log(res);
    	                    _this.setData({
    	                        img: res.tempFilePath
    	                    });
    	                    _this.canvasImg();
    	                }
    	            })
                },
                canvasImg() {
            const ctx = wx.createCanvasContext('myCanvas');
            const grd = ctx.createLinearGradient(0, 0, 0, 0); //创建了一个线性的渐变颜色 前两个参数起点横纵坐标，后两个参数终点横纵坐标
            grd.addColorStop(0, '#fff');
            grd.addColorStop(0, '#fff');
            ctx.setFillStyle(grd); //为创建的canvans上下文添充颜色  如果没有设置 fillStyle，默认颜色为 black。
            ctx.fillRect(0, 0, 300, 556);
            ctx.drawImage(this.data.img, 0, 0, 300, 556); //里面的参数无非就是图片放置的位置即图片的横纵坐标，图片的宽高
            ctx.setFontSize(50); //字大小
            ctx.setTextAlign('center'); //是否居中显示，参考点画布中线
            ctx.setFillStyle("#333333");
            ctx.fillText("需要的文字", 210, 285);
            ctx.draw();
        },
        saveImg() {
            wx.showLoading({
                title: '保存中...'
            })
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 300, //画布宽高
                height: 556,
                destWidth: 600, //画布宽高*dpr 以iphone6为准
                destHeight: 1112,
                canvasId: 'myCanvas',
                success: function(res) {
                    //console.log(res.tempFilePath) //生成的临时图片路径
                    wx.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: function(res) {
                            //console.log(res);
                            wx.hideLoading()
                            wx.showToast({
                                title: '保存成功',
                            })
                        },
                        fail: function(err) {
                            if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                                // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                                wx.showModal({
                                    title: '提示',
                                    content: '需要您授权保存相册',
                                    showCancel: false,
                                    success: modalSuccess => {
                                        wx.openSetting({
                                            success(settingdata) {
                                                //console.log("settingdata", settingdata)
                                                if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                    wx.showModal({
                                                        title: '提示',
                                                        content: '获取权限成功,再次点击图片即可保存',
                                                        showCancel: false,
                                                    })
                                                } else {
                                                    wx.showModal({
                                                        title: '提示',
                                                        content: '获取权限失败，将无法保存到相册哦~',
                                                        showCancel: false,
                                                    })
                                                }
                                            },
                                            fail(failData) {
                                                //console.log("failData", failData)
                                            },
                                            complete(finishData) {
                                                //console.log("finishData", finishData)
                                            }
                                        })
                                    }
                                })
                            }
                        },
                        complete(res) {
                            wx.hideLoading()
                        }
                    })
                }
            })
        },
     })