微信小程序canvar画布生成图片及保存图片

canvars画布画的图片不能使用线上地址，只能使用本地地址

canvars不支持是用component

结构

<view class="modal-wrap" style="position:fixed;left:{{wrap}}px;">

    <view class="modal-box">

      <canvas class='canvas' style="height:{{_heigth}}px;width:{{_width*375-75+'px'}};background-          color:#fff" id="myCanvas"  type="2d"></canvas>

      <view class="btns-box">

        <button class="btns" bindtap='saveImg'>保存到相册</button>

        <button bindtap='closePos' class='btn'>取消</button>

      </view>

    </view>

  <!--遮罩层-->

  <view class="mask" bindtap="close"></view>

 css结构

.modal-wrap{

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 100;

}

.mask{

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 10;

  background-color: rgba(0,0,0,.5);

}

.modal-box{

  position: absolute;

  width: 80%;

  left: 50%;

  top: 50%;

  transform: translate3d(-50%,-50%,0);

  min-height: 200rpx;

  background-color: #ffffff;

  border-radius: 20rpx;

  z-index: 20;

}

.close-btn{

  position: absolute;

  top: 20rpx;

  right: 20rpx;

  z-index: 10;

  width: 60rpx;

  height: 60rpx;

  display: flex;

  align-items: center;

  justify-content: center;

}

/* 保存到相册 */

.modal-wrap .btns-box{

  display: flex;

  justify-content: space-around;

  margin: 0 0 10rpx 20rpx;

}

.modal-wrap .btns-box .btns{

  background-color: #2a82e4;

  /* margin: 0; */

  /* padding: 0; */

  width: 240rpx;

  border-radius: 32rpx;

  font-size: 28rpx;

  color: #ffff;

}

.modal-wrap .btns-box .btn{

  border: #ffffff 2rpx solid;

  background-color: #cccc;

  border-radius: 32rpx;

  width: 240rpx;

  color: #ffff;

  font-size: 28rpx;

}

 js部分

Page({

  data: {

    loadType: false,//canvas是否显示

    _width: 0, //画布屏宽

    _heigth: 0,//画布屏高

    model:"",  //手机型号

    Text:"好窝装修",

    wrap: 900,

    loadImagePath: '',//下载的图片

    title: '',   //动态的title的值

    // 改变的title的值

    modifyTitleVal: ''

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) { 

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  // 画布

  canvas(){

    this.setData({

      wrap : 0

    })

    console.log("this.data.wrap",this.data.wrap)

  },

  onReady: function () {

    this.getSysInfo()

    const query = wx.createSelectorQuery()

    query.select('#myCanvas')

          .fields({

                id: true,

                node: true,

                size: true

          })

          .exec(this.init.bind(this));

  },

  init(res) {

    const canvas = res[0].node

    const ctx = canvas.getContext('2d')

    const dpr = wx.getSystemInfoSync().pixelRatio

    //新接口需显示设置画布宽高；

    canvas.width = res[0].width * dpr

    canvas.height = res[0].height * dpr

    ctx.scale(dpr, dpr);

    ctx.fillStyle = "#fff";

    ctx.fillRect(0, 0, canvas.width, canvas.height);

    this.setData({

          canvas,

          ctx

    });

    this.canvasDraw();//向画布载入图片的方法

    this.txte(); //文字

    this.drew();  //导出图片

    console.log(res)

},

canvasDraw() {

  let rpx = this.data._width

  this.data.ctx.fillRect(0, 0, rpx * 375, this.data_height * 1.21)

  let img2 = this.data.canvas.createImage();//创建img对象

  img2.onload = () => {

       //img.complete表示图片是否加载完成，结果返回true和false;

        console.log(img2.complete);//true

        this.data.ctx.drawImage(img2, 190*rpx, 28*rpx, 100*rpx, 100*rpx);

  };

  img2.src = "/images/team.png";

  console.log(img2.complete);

    let img = this.data.canvas.createImage();//创建img对象

    img.onload = () => {

          this.data.ctx.drawImage(img, 67*rpx, 160*rpx, 168*rpx, 168*rpx);

    };

    img.src = "/images/code.jpg";

},

txte(){

  let rpx = this.data._width

  this.data.ctx.fillRect(0, 0, rpx * 375, this.data_height * 1.21)

  this.data.ctx.font="16px sans-serif";

  this.data.ctx.fillStyle='#999999';

  // this.data.ctx.setTextAlign='center';

  this.data.ctx.fillText(this.data.Text, 15*rpx , 38*rpx,);

  this.data.ctx.fillStyle='#505050';

  this.data.ctx.fillText('刘文峰', 15*rpx , 66*rpx,);

  this.data.ctx.fillStyle='#999999';

  this.data.ctx.fillText('总经理', 15*rpx , 92*rpx,);

  this.data.ctx.fillText('手机号：13112345678', 15*rpx , 117*rpx,);

  this.data.ctx.fillText('所在地：四川 成都', 15*rpx , 138*rpx,);

  this.data.ctx.font="14px sans-serif";

  this.data.ctx.fillStyle='#505050';

  this.data.ctx.fillText('长按识别小程序码，马上认识我', 60*rpx , 357*rpx,);

  console.log("this.data",this.data)

},

  // 获取手机宽高

  getSysInfo(){

    let that = this

    wx.getSystemInfo({

      success(res) {

        let  _width= res.windowWidth/375;

        let _height = res.windowHeight-200;

        console.log("12345679",res)

        console.log("res.windowWidth",res.windowWidth)

        console.log("res.windowHeight",res.windowHeight)

          that.setData({

              model: res.model,

              _width: _width,

              _heigth: _height,

              canvasType: true,

          })

          console.log("_width",that.data._width)

          console.log(" _heigth",that.data._heigth)

      }

  })

  },

//导出图片（生成图片）

  drew(){

    let _ctx = this.data.ctx;

    let self = this;

    console.log("_ctx",_ctx);

    // this.drew();

    setTimeout(function() {

      console.log("保存图片")

       wx.canvasToTempFilePath({

        width:self.data._width* 375-70,

        height: self.data._heigth * 1.21,

        fileType:"jpg" ,

          //canvasId: 'mycanvas',

          canvas: self.data.canvas,

          success: function(res) {

            console.log("res",res)

              // let tempFilePath = res.tempFilePath;

              self.setData({

                  loadImagePath: res.tempFilePath,

              });

              console.log("self.data.loadImagePath",self.data.loadImagePath)

          },

          fail: function(res) {

              console.log(res);

          }

      })

    }, 500);

  },

  // 保存到相片

  saveImg(){

    let self = this;

    console.log("100")

    wx.saveImageToPhotosAlbum({

      filePath: self.data.loadImagePath,

      success(res) {

        self.setData({

          wrap : 900

        })

          console.log('res1', res);

          // filePath: this.data.loadImagePath,

          wx.showToast({

              title: '已保存到相册',

              icon: 'success',

              duration: 3000

          })

      }

  })

  console.log("filePath",this.filePath)

  },

  // 取消

  closePos(){

    console.log("123123")

    this.setData({

      wrap : 900

    })

  },

})