微信小程序生成海報保存圖片到相冊小測試

test.wxml

<canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id="myCanvas" class='canvas' hidden='{{hideme}}'></canvas>
<image wx:if="{{tempPath!=''}}" class="viewimg" src="{{tempPath}}" mode="widthFix"></image>
<view class="operbtns">
  <button class="button" type="primary" bindtap="savePic">保存圖片</button> 
</view>

 

test.js

Page({

  data: {
    title: '測試',
    tempPath: '',
    hideme: false
  },

  onLoad: function (options) {
    var that = this;
    var imageSize = that.image();
    that.setData({
      imageWidth: imageSize.imageWidth,
      imageHeight: imageSize.imageHeight,
      windowscale: imageSize.windowscale,
    });
    
    //獲取背景圖片
    that.getBackground();
    //獲取頭像
    //that.getAvatar();

    wx.showToast({
      title: '正在生成圖片',
      icon: 'loading',
      duration: 10000,
    });
  },

  image: function() {
      var imageSize = {};
      var originalScale = 1;//圖片高寬比  
      //獲取屏幕寬高  
      wx.getSystemInfo({
        success: function (res) {
          var windowWidth = res.windowWidth;
          var windowHeight = res.windowHeight;
          var windowscale = windowHeight / windowWidth;//屏幕高寬比  
          imageSize.windowscale = windowscale;
          if (originalScale < windowscale) {//圖片高寬比小於屏幕高寬比  
            //圖片縮放后的寬為屏幕寬  
            imageSize.imageWidth = windowWidth;
            imageSize.imageHeight = Math.floor(windowWidth * 1.779);
          } else {//圖片高寬比大於屏幕高寬比  
            //圖片縮放后的高為屏幕高  
            imageSize.imageHeight = windowHeight;
            imageSize.imageWidth = Math.floor(windowHeight / 1.779);
          }

        }
      })
      return imageSize;
    },

  getBackground: function () {
    var that = this;
    wx.downloadFile({
      url: 'https://a.b.c/public/images/bg.png',
      success: function (res) {
        that.setData({
          tempPath: res.tempFilePath,
          share: res.tempFilePath,
        })
        //把背景畫到畫布上
        that.createImg();
      },
      fail: function () {
        console.log('fail')
      }
    })
  },

  createImg: function () {
    var that = this;
    var ctx = wx.createCanvasContext('myCanvas');
    ctx.setFillStyle('White');
    ctx.fillRect(0, 0, that.data.imageWidth, that.data.imageHeight);
    ctx.drawImage(that.data.share, 0, 0, that.data.imageWidth, that.data.imageHeight);
    ctx.save();
    //ctx.beginPath();
    //ctx.arc(that.data.imageWidth / 2, that.data.imageHeight * 0.63, 65, 0, 2 * Math.PI);
    //ctx.clip();
    //ctx.drawImage(that.data.avatar, that.data.imageWidth / 2 - 60, that.data.imageHeight * 0.55, 120, 120);
    //ctx.restore();
    ctx.setTextAlign('center');
    ctx.setFillStyle('#ffffff');
    ctx.setFontSize(22);
    ctx.fillText(that.data.title, that.data.imageWidth / 2, that.data.imageHeight * 0.41);
    
    ctx.draw();
    //顯示新畫的圖片
    that.viewPic();
  },

  viewPic: function(){
    var that = this;
    wx.canvasToTempFilePath({
      width: that.data.imageWidth,
      height: that.data.imageHeight,
      canvasId: 'myCanvas',
      success: function (res) {
        that.setData({
          tempPath: res.tempFilePath,
          hideme: true
        });
      }
    });
    wx.hideToast();
  },

  savePic: function () {
    var that = this;
    wx.showToast({
      title: '正在保存圖片',
      icon: 'loading',
      duration: 10000,
    });
    util.savePicToAlbum(that.data.tempPath);
  },

  onReady: function () {
  },
  onShow: function () {
  },
  onHide: function () {
  },
  onUnload: function () {
  },
  onShareAppMessage: function () {
  },
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  }
})