微信小程序--canvas 画海报 转发好友 下载本地

获取本地手机的屏幕宽高（宽高需要按照自己实际需求计算）

  toCanvas() {
    let that = this
    wx.getSystemInfo({
      success: function(res) {
        console.log(res);
        console.log(res.windowWidth / 750)
        let company = res.windowWidth / 750
        that.setData({
          company:company
        })
      }
    })
    let windowWidth = wx.getSystemInfoSync().windowWidth; //可使用窗口宽度，单位px
    let windowHeight = wx.getSystemInfoSync().windowHeight-90; // 可使用窗口高度，单位px
    // console.log('windowWidth',windowWidth);
    // console.log('windowHeight',windowHeight);
    this.setData({
      windowWidth:windowWidth,
      windowHeight:windowHeight,
    })
    this.canvasFunction()
  },

画canvas海报（设置按照自己的需求）

  <view class="canvasHe">
    <canvas canvas-id="myCanvas" style='width:100%;height:{{windowHeight}}px;' ></canvas>
  </view>
wxss
.canvasHe{
  width: 750rpx;
  /* height: 510px; */
  padding: 0rpx 15rpx;
  box-sizing: border-box;
  position: relative;
}

  canvasFunction(params) {
    // 创建Canvas绘图上下文对象CanvasContext
    let windowWidth = this.data.windowWidth-15;
    let windowHeight = this.data.windowHeight;
    let company = this.data.company;

    let name=this.data.name;
    let phone = this.data.phone;
    
    let ewcode = this.data.ewcode;//图片路径
    let ewcodeW = this.data.ewcodeW;
    let ewcodeH = this.data.ewcodeH;


    const ctx =  wx.createCanvasContext('myCanvas')
    let bgPicturePath = "../../../static/canvasBeiJing.png";//图片路径不要出错
    ctx.drawImage(bgPicturePath, 0, 0, windowWidth, windowHeight);

    let erweima = "../../../static/canvaslogo.png";//图片路径不要出错
    ctx.drawImage(erweima, (windowWidth/2-(50*company)), 100*company, 100*company, 100*company);

    ctx.drawImage(ewcode,(windowWidth/2-(ewcodeW*company*1.6/2)), (windowHeight/2-(50*company)), ewcodeW*company*1.6, ewcodeH*company*1.6);



    ctx.font = 'normal 400 25px SimHei';
    ctx.setFillStyle('#958973'); // 文字颜色
    ctx.setFontSize(24*company); // 文字字号

    ctx.fillText('姓    名：', 180*company, 260*company ); // 绘制文字
    ctx.fillText('联系电话：', 180*company, 300*company); // 绘制文字

    ctx.fillText(name, 300*company, 260*company ); // 绘制文字
    ctx.fillText(phone, 300*company, 300*company); // 绘制文字

    ctx.strokeStyle = "#958973";

    // ctx.strokeRect((windowWidth/2-50),(windowHeight/2),100,100);

    ctx.moveTo(300*company,270*company);
    ctx.lineTo(500*company,270*company);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#958973";
    ctx.stroke();

    ctx.moveTo(300*company,310*company);
    ctx.lineTo(500*company,310*company);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#958973";
    ctx.stroke();

    // // 3
    ctx.setFillStyle('#A6A6A6'); // 文字颜色
    ctx.setFontSize(22*company); // 文字字号
    console.log(ctx.measureText('我们为您提供').width);
    let str1 = '我们为您提供'
    let str2 = '最专业最便捷的服务'
    ctx.fillText(str1, (windowWidth/2)-(ctx.measureText(str1).width/2), (windowHeight/2.8)); // 绘制文字
    ctx.fillText(str2, (windowWidth/2)-(ctx.measureText(str2).width/2), (windowHeight/2.6) ); // 绘制文字


    ctx.setFillStyle('#6B6B6B'); // 文字颜色
    ctx.setFontSize(20*company); // 文字字号
    let str3 = '【天下APP】是天下平台'
    let str4 = '针对广大朋友精心打造的一款房地产营销工具'
    let str5 = '可以进行客户自动报备、房源信息查看'
    let str6 = '客户状态实时查看、线上核账、查看账单、组建团队等业务操作'
    let str7 = '【全国统一咨询电话：】'

    ctx.fillText(str3, (windowWidth/2)-(ctx.measureText(str3).width/2), (windowHeight/1.3) ); // 绘制文字
    ctx.fillText(str4, (windowWidth/2)-(ctx.measureText(str4).width/2), (windowHeight/1.25) ); // 绘制文字
    ctx.fillText(str5, (windowWidth/2)-(ctx.measureText(str5).width/2), (windowHeight/1.2) ); // 绘制文字
    ctx.fillText(str6, (windowWidth/2)-(ctx.measureText(str6).width/2), (windowHeight/1.15) ); // 绘制文字
    ctx.fillText(str7, (windowWidth/2)-(ctx.measureText(str7).width/2), (windowHeight/1.1) ); // 绘制文字

    ctx.draw ()
  },

下载到本地相册 判断是否有授权

  baocunBenDi(){
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: (res) => {
        let tempFilePath = res.tempFilePath
        // 判断是否授权保存到相册
        this.checkAuthSetting(tempFilePath)
      },
      fail: () => {}
    })
  },
  checkAuthSetting(tempFilePath){
    wx.getSetting({
      success:(res)=>{
      	//是否已授权
        if (res.authSetting['scope.writePhotosAlbum']) {
          //已授权直接保存
          this.saveImageToPhotosAlbum(tempFilePath)
        }
      	//未授权请求授权
        else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: ()=>{
               //授权后保存
              this.saveImageToPhotosAlbum(tempFilePath)
            },
            fail: ()=>{
              wx.showToast({
                title: '您没有授权，无法保存到相册',
                icon: 'none'
              })
            }
          })
        } 
        //用户拒绝授权后，无法再直接调起请求授权，需要用户自己去设置
        else {
          wx.openSetting({
            success: (res)=>{
              if (res.authSetting['scope.writePhotosAlbum']) {
                //用户设置后保存
                this.saveImageToPhotosAlbum(tempFilePath)
              } else {
                wx.showToast({
                  title: '您没有授权，无法保存到相册',
                  icon: 'none'
                })
              }
            }
          })
        }
      }
    })
  },
  saveImageToPhotosAlbum(tempFilePath) {
    //保存
      wx.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: (res) => {
          //提示用户已保存
          wx.showModal({
            content: '图片已保存',
            showCancel: false,
            confirmText: '确认',
            confirmColor: '#333',
            success: (res) => {
              // if (res.confirm) {
              //   let arr = [];
              //   arr.push(tempFilePath);
              //   //全屏显示已保存图片   
              //   使用这个方法打开图片 长按可以弹出提示框 其中有分享好友的选项
              //   wx.previewImage({
              //     urls: arr,
              //     current: arr
              //   })
              // }

            },
            fail: (res) => {}
          })
        },
        fail: () => {
        }
      })
  },

分享到微信好友

  saveShareImg() {
   let that = this;
   let windowW = that.data.windowWidth;
   let windowH = that.data.windowHeight;
   wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: windowW,
     height: windowH,
     destWidth: windowW*2,  
     destHeight: windowH*2, 
     canvasId: 'myCanvas',
     success: function (res) {
      console.log(res)
      that.FenXiangShareImg(res.tempFilePath)
     }
   })
  },
  FenXiangShareImg(tempFilePath){
    console.log("tempFilePath",tempFilePath);
        wx.showShareImageMenu({
          path: tempFilePath,
          success: (res) => {
            console.log("分享成功：", res);
        },
        fail: (err) => {
            console.log("分享失败：", err);
            wx.showToast({
                title: "分享失败",
                duration: 2000
            })
        },
      })
  },

参考地址1
参考地址2