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

Posted 2022-01-03 6min

test.wxml

<canvas style="width:imageWidthpx;height:imageHeightpx;" 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();
  
)