小程序生成海报保存图片到相册小测试

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,that.data.imageHeight);
    ctx.save();
    //ctx.beginPath();
    //ctx.arc(that.data.imageWidth / 2,that.data.imageHeight * 0.63,65,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‘,hideme: true
        });
      }
    });
    wx.hidetoast();
  },savePic: function () {
    var that = this;
    wx.showToast({
      title: ‘正在保存图片‘,});
    util.savePicToAlbum(that.data.tempPath);
  },onReady: function () {
  },onShow: function () {
  },onHide: function () {
  },onUnload: function () {
  },onShareAppMessage: function () {
  },onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  }
})