小程序制作海报，保存本地

<view style='width:100%;'>
<image style='width:100%;' src="../../img/china_img.png"></image>
</view>
<view class='CONTECT'>欢迎你是神啊深刻的三大杀菌剂啥都会受到大叔大婶帝国时代干</view>
<view style='width:100%;margin-top:0.5rem;'>
<view class='CREATETIME'>2016-11-03</view>
<view class='both'></view>
</view>
 <view class='QRCODE'>
<image style='width:100%;height:100%;' src="../../img/china_img.png"></image>
</view>
<canvas canvas-id='share' style='width:100%;height:100%;' hidden='{{canvasHidden}}'>

</canvas>
<view class='more' bindtap='saveImageToPhotosAlbum'>保存图片</view> 

const app = getApp();
let wx_request_zr = require('../../utils/wx_request_zr.1.0.1.js');
var that;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasHidden: true,     //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
    avatarUrl: '',         //用户头像
    nickName: '',          //用户昵称
    wxappName: "端端的",    //小程序名称
    shareImgPath: '',
    screenWidth: '',       //设备屏幕宽度
    description: "撒的撒打算的撒打算大的",    //奖品描述
    FilePath: '',           //头像路径
    PICTURE:'../../img/timg.jpg',
    erweima:'../../img/aaa.jpg',
    ttim:"../../img/ttim.png",
    textn:"电话萨达哈时间快点哈时间看到黄金卡速度哈时间打哈时间看到哈萨克的哈萨克记得哈时间快点哈时间快点哈时间肯定会爱仕达多进口红酒斯卡迪哈时间快点哈时间看到哈萨克带回家啊"
  },
  onLoad: function (options) {
    var that = this
    var userInfo, nickName, avatarUrl
    const context = wx.createCanvasContext('myCanvas')
   
    //获取用户信息，头像，昵称之类的数据
    wx.getUserInfo({
      success: function (res) {
        console.log(res);
        userInfo = res.userInfo
        nickName = userInfo.nickName
        avatarUrl = userInfo.avatarUrl
        that.setData({
          avatarUrl: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName,
        })
        wx.downloadFile({
          url: res.userInfo.avatarUrl
        })
      }
    })
    //获取用户设备信息，屏幕宽度
    wx.getSystemInfo({
      success: res => {
        that.setData({
          screenWidth: res.screenWidth
        })
        console.log(that.data.screenWidth)
      }
    })
  },
    //定义的保存图片方法
    
    saveImageToPhotosAlbum:function () {
      wx.showLoading({
        title: '保存中...',
      })
      var that = this;
      //设置画板显示，才能开始绘图
      that.setData({
        canvasHidden: false
      })
      var unit = that.data.screenWidth / 375
      var path1 = that.data.ttim //白底
      var avatarUrl = that.data.avatarUrl
      console.log(avatarUrl + "头像")
      //var path2 = that.data.PICTURE
      var path3 = that.data.erweima //二维码
      //var path4 = that.data.PICTURE
      var path5 = that.data.PICTURE //顶图
      var textn = that.data.textn //描述
      //var unlight = "../../img/china_img.png"
      var nickName = that.data.nickName
      console.log(nickName + "昵称")
      var context = wx.createCanvasContext('share')
      var description = that.data.description
      
    
      
    //var wxappName = "来「 " + that.data.wxappName + " 」试试运气"
      context.drawImage(path1, 0, 0, unit * 480, unit * 800)
      //   context.drawImage(path4, unit * 164, unit * 40, unit * 50, unit * 50)
      //context.drawImage(path2, unit * 48, unit * 120, unit * 280, unit * 280)
      context.drawImage(path5, unit * 0, unit * 0, unit * 480, unit * 160)
      // context.drawImage(unlight, unit * 82, unit * 145, unit * 22, unit * 32)
      // context.drawImage(unlight, unit * 178, unit * 145, unit * 22, unit * 32)
      // context.drawImage(unlight, unit * 274, unit * 145, unit * 22, unit * 32)
      // context.drawImage(unlight, unit * 82, unit * 240, unit * 22, unit * 32)
      // context.drawImage(unlight, unit * 178, unit * 240, unit * 22, unit * 32)
      // context.drawImage(unlight, unit * 274, unit * 240, unit * 22, unit * 32)
      context.drawImage(path3, unit * 20, unit * 385, unit * 80, unit * 55)
      //   context.drawImage(path4, 48, 200, 280, 128)
      context.setFontSize(14)
      context.setFillStyle("#999")
     // context.fillText(textn, unit * 10, unit * 180)
      context.fillText("长按识别图中二维码", unit * 120, unit * 418)
      //context.fillText(wxappName, unit * 90, unit * 428)
      //tou 删除
      var text = that.data.textn;//这是要绘制的文本
      var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
      var temp = "";
      var row = [];
      context.setFontSize(16)
      context.setFillStyle("#000")
      for (var a = 0; a < chr.length; a++) {
        if (context.measureText(temp).width < 800) {
          temp += chr[a];
        }
        else {
          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
          row.push(temp);
          temp = "";
        }
      }
      row.push(temp);

      //如果数组长度大于2 则截取前两个
      if (row.length > 3) {
        var rowCut = row.slice(0, 3);
        var rowPart = rowCut[i];
        var test = "";
        var empty = [];
        for (var a = 0; a < rowPart.length; a++) {
          if (context.measureText(test).width < 380) {
            test += rowPart[a];
          }
          else {
            break;
          }
        }
        empty.push(test);
        var group = empty[i] + "..."//这里只显示两行，超出的用...表示
        rowCut.splice(3, 4, group);
        row = rowCut;
      }
      for (var b = 0; b < row.length; b++) {
        context.fillText(row[b], 10, 30 + b * 130, 200);
      }
//di
      //把画板内容绘制成图片，并回调 画板图片路径
      context.draw(false, function () {
        
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: unit * 375,
          height: unit * 462.5,
          destWidth: unit * 480,
          destHeight: unit * 800,
          canvasId: 'share',
          success: function (res) {
            that.setData({
              shareImgPath: res.tempFilePath
            })
            if (!res.tempFilePath) {
              wx.showModal({
                title: '提示',
                content: '图片绘制中，请稍后重试',
                showCancel: false
              })
            }
            console.log(that.data.shareImgPath)
            //画板路径保存成功后，调用方法吧图片保存到用户相册
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              //保存成功失败之后，都要隐藏画板，否则影响界面显示。
              success: (res) => {
                console.log(res)
                wx.hideLoading()
                that.setData({
                  canvasHidden: true
                })
              },
              fail: (err) => {
                console.log(err)
                wx.hideLoading()
                that.setData({
                  canvasHidden: true
                })
              }
            })
          }
        })
      });
    },


})