小程序用Canvas点击保存自定义二维码

html:部分

<canvas canvas-id="myCanvas" style="width:320px;height:400px;margin:30rpx auto;"/>

      <view @tap='saveImg' style='width:150rpx;height:50rpx;background:#000;color:#fff;

      text-align:center;line-height:50rpx;border-radius:10rpx;

      font-size:24rpx;margin:0 auto'>保存</view>

js: 部分

（备注：项目是用mpvue，uni-app，vue 语法可以直接使用：小程序开发开发框架。小程序原生用的话，自己转一下this 指向赋值就可以了）

data(){
 return{

      img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566540117318&di=016c1af6ebfe2182af0337e312770091&imgtype=0&src=http%3A%2F%2Fd-pic-image.yesky.com%2F1080x-%2FuploadImages%2F2019%2F044%2F59%2F1113V6L3Q6TY.jpg"

    }

  },

onShow(){ 
   let that=this;

    //先下载下来，比如我们的logo（没有下载 真机无效图片）

    wx.downloadFile({

      url: that.img,

      success:function(res){

          console.log(res);

          that.img= res.tempFilePath

          that.canvasImg();

      }

    })

  },

//画出画布 
canvasImg(){

      const ctx = wx.createCanvasContext('myCanvas');

      // const grd = ctx.createLinearGradient(0, 0, 320, 0);//创建了一个线性的渐变颜色 前两个参数起点横纵坐标，后两个参数终点横纵坐标

      // grd.addColorStop(0, '#EFDCB2');

      // grd.addColorStop(1, '#EFDCB2');

      // ctx.setFillStyle(grd);  //为创建的canvans上下文添充颜色  如果没有设置 fillStyle，默认颜色为 black。

      ctx.fillStyle='#EFDCB2';//背景色

      ctx.fillRect(0, 0, 320, 400);

      ctx.fillStyle="#ffffff";

      ctx.fillRect(50,60,220,220); //白色填充色的背景

      ctx.fillStyle="#ffffff";

      ctx.fillRect(0,340,320,60); //填充色的背景

      ctx.drawImage(this.img, 70, 80, 180, 180);  //里面的参数无非就是图片放置的位置即图片的横纵坐标，图片的宽高

      ctx.setFillStyle("#000000");

      ctx.setFontSize(20);                              //字大小

      ctx.setTextAlign('center');                        //是否居中显示，参考点画布中线

      ctx.fillText('店铺二维码', 160, 320);            //150:canvas画布宽320，取1/2，中间，280：纵向位置

      ctx.drawImage(this.img, 50, 350, 40, 40); //logo

      ctx.setFillStyle("#333333");

      ctx.setFontSize(22);                              //字大小

      ctx.setTextAlign('center');                        //是否居中显示，参考点画布中线

      ctx.fillText('中琛源溯源营销', 180, 380);            //150:canvas画布宽320，取1/2，中间，280：纵向位置

      //最外面的边框

      ctx.setStrokeStyle('#EFDCB2');

      ctx.strokeRect(0, 0, 320, 400);

      ctx.draw();    //画，生成                                 

    },

//导出画布    
saveImg() {

      setTimeout(()=>{

          wx.canvasToTempFilePath({ //保存画布

              x:0,

              y:0,

              width: 320,                    //画布宽高

              height: 400,

              destWidth: 600,                //画布宽高*dpr 以iphone6为准

              destHeight: 800,

              canvasId: 'myCanvas',

              success: function (res) {

                console.log(res.tempFilePath) //生成的临时图片路径

                wx.saveImageToPhotosAlbum({

                  filePath: res.tempFilePath,

                  success: function (res) {

                    wx.showToast({

                      title: '保存成功',

                    })

                  }

                })

              }

            })

      },100)

}

有问题可以提出T~T