小程序canvas画图并保存

　　canvas可以在style中进行隐藏，但是不能使用display:none;

js代码：

onLoad: function (options) {
    let _this = this;
    const ctx = wx.createCanvasContext('firstCanvas');
    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0, 0, 355, 528);
    // _this.drawtouxiang(ctx);
    // var path1='/images/avatar.png';
    var path1=_this.data.touxiang;
    ctx.drawImage(path1,10,15,50,50);
    var path2=_this.data.newsimg;
    ctx.drawImage(path2,10,80,335,190);
    var path3=_this.data.imgtuijian;
    ctx.drawImage(path3,10,443,66,66);
    // 设置背景颜色
    this.drawText(ctx);
    
    // ctx.draw();
    ctx.draw(true,setTimeout(function(){
        },1000));

    console.log(ctx);
  },

drawText:function(ctx){
     // ctx.setFillStyle('#ffffff');
     // ctx.fillRect(0, 0, 355, 528);
     // 昵称：我要买房
     ctx.setFontSize(16);      //设置字体大小
     ctx.setFillStyle('#333333');   //设置字体颜色
     ctx.fillText('我要买房', 75,31);  //设置字体内容、坐标
     //给你推荐
     ctx.setFontSize(10);      
     ctx.setFillStyle('#596A86');   
     ctx.fillText('给你推荐', 149,31); 
     // 这篇资讯好精彩！快来和我一起看看！
     ctx.setFontSize(13);      
     ctx.setFillStyle('#999999');   
     ctx.fillText('这篇资讯好精彩！快来和我一起看看！', 75,56);
     // 恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户
     ctx.setFontSize(18);      
     ctx.setFillStyle('#333333'); 
     // 文字换行
     var text='恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户';
     // 换行，三行
     var text2='恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活4...沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、恭喜南沙!大资80亿元，盘活40万平用地！一大批土豪村落要户、';
     this.dealWords({
         ctx: ctx,//画布上下文
         fontSize: 18,//字体大小
         fillstyle:'#333333',
         word: text,//需要处理的文字
         maxWidth: 325,//一行文字最大宽度
         x: 10,//文字在x轴要显示的位置
         y: 285,//文字在y轴要显示的位置
         maxLine: 2//文字最多显示的行数
     });
     this.dealWords({
             ctx: ctx,//画布上下文
             fontSize: 14,//字体大小
             fillstyle:'#666666',
             word: text2,//需要处理的文字
             maxWidth: 325,//一行文字最大宽度
             x: 10,//文字在x轴要显示的位置
             y: 346,//文字在y轴要显示的位置
             maxLine: 3//文字最多显示的行数
     });
     
     ctx.setFontSize(16);      //设置字体大小
     ctx.setFillStyle('#333333');   //设置字体颜色
     ctx.fillText('随便啦', 91,463);  //设置字体内容、坐标
     // 长按识别，获取更多精彩内容
     ctx.setFontSize(14);      //设置字体大小
     ctx.setFillStyle('#999999');   //设置字体颜色
     ctx.fillText('长按识别，获取更多精彩内容', 91,493);  //设置字体内容、坐标
     
 },

点击保存按钮保存图片：

保存图片时，要先判断是否已经授权给微信了

saveimg:function(){
    console.log('点击了保存图片');
    let that=this;
    // 授权放置在相册里面
     wx.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                // 用户已经同意小程序相册功能，后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问
                that.saveablum()
              },
            fail(){
                that.setData({
                    openauthpop: true
                });
              // that.handleSetting(res);
            }
            })
          }else{
            that.saveablum()
          }
        }
      });    
},

saveablum:function(){
     let imageWidth = this.data.imageWidth,
     imageHeight = this.data.imageHeight;
     wx.canvasToTempFilePath({     //将canvas生成图片
       canvasId: 'firstCanvas',
       x: 0,
       y: 0,
       width: imageWidth,
       height: imageHeight,
       destWidth: imageWidth,     //截取canvas的宽度
       destHeight: imageHeight,   //截取canvas的高度
       success: function (res) {
           wx.saveImageToPhotosAlbum({  //保存图片到相册
             filePath: res.tempFilePath,
             success: function () {
               wx.showToast({
                 title: "生成图片成功！",
                 duration: 2000
               })
             },
             fail: function () {
               
             },
           })
       },
       fail:function(res){
           console.log(res);
       }
     })
  },

如果用户取消授权写入相册，则必须给一个button去调用

	警告
	若不打开授权，则无法将图片保存在相册中！
	
	
		取消
		确定
	

　　

.wrap{
	position: fixed;
	left: 0;
	right:0;
	top:0;
	bottom:0;
	background:rgba(0,0,0,0.3);
}
.authpop{
	position: fixed;
	top: 30%;
	left: 10%;
	width: 600rpx;
	height:230rpx;
	z-index: 1003;
	background:#FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius:30rpx;
}
.authpop .title{
	font-size: 36rpx;
	color: #333333;
	padding: 10rpx;
	width:600rpx;
	display: flex;
	justify-content: center;
}
.authpop .content{
	font-size: 20rpx;
	color: #999999;
	padding: 5rpx;
	width:600rpx;
	display: flex;
	justify-content: center;
}
.authpop .xian{
	width: 500rpx;
	height: 1rpx;
	background:#f5f5f5;
	margin-top: 10rpx;
}
.authpop .btn{
	display: flex;
	width: 600rpx;
	height: 50rpx;
	padding-top: 1rpx;
	background: #FFFFFF;
}

.bt::after{
  border: none;
}
.bt{
  background-color: #fff;
	border-radius:0;
	width: 49%;
	padding-top: 5rpx;
	display: flex;
	justify-content: center;
}