小程序canvas畫圖並保存

<canvas style="width:355px; height:528px; background:#ffffff;visibity: hidden;position: absolute; top: -10000px; left:-10000rpx;" canvas-id="firstCanvas">
	
</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去調用

<view class="wrap" wx:if="{{openauthpop}}" bindtap="hiddenauthphp"></view>
<view class="authpop"  wx:if="{{openauthpop}}">
	<view class="title">警告</view>
	<view class="content">若不打開受權，則沒法將圖片保存在相冊中！</view>
	<view class="xian"></view>
	<view class="btn">
		<button class="bt left" bindtap="hiddenauthphp">取消</button>
		<button class="bt right" open-type="openSetting" bindopensetting='handleSetting'>肯定</button>
	</view>
</view>

　　

.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;
}