小程序canvas生成海報保存至手機相冊

小程序canvas畫圖保存至手機相冊

（1）可直接展示生成的海報 。因手機分辨率不同可能導致生成的海報會有細微差別，這里隱藏canvas海報，頁面正常設置海報樣式保存時保存隱藏的canvas海報

（2）tip: canvas 組件是由客戶端創建的原生組件，它的層級是最高的，不能通過 z-index 控制層級。（在手機上canvas在最上層無法隱藏）解決方法：

　　canvas外加一框view 設置樣式：style="width:0;height:0;overflow: hidden;opacity:0;position:absolute;left:-375px;top:0; 隱藏在屏幕之外

<view class="container">
    <view class="btn" bindtap="saveImage">保存圖片</view>
    <view class="canvasBox">
    <!-- <view class="canvasBox" style="width:0;height:0;overflow: hidden;opacity:0;position:absolute;left:-375px;top:0;"> -->
　　 <!--這里為了展示效果為設置到屏幕之外 -->
    <canvas canvas-id='myCanvas' style='width:375px;height:500px;margin: 0;padding: 0;display:block;'></canvas>
  </view>
</view>

（3）繪制圓形用戶頭像　

      ctx.arc(46,358,25, 0, 2 * Math.PI)

      ctx.fill()

      ctx.save();

      ctx.beginPath(); //開始繪制

      ctx.clip(); //剪切

      ctx.drawImage(res.path, 23, 333, 50, 50); //userHeader // 推進去圖片必須是https

      ctx.restore(); //恢復之前保存的繪圖上下文 繼續繪制

（4）小程序canvas真機繪圖時無法使用網絡圖片，需下載至手機使用臨時路徑繪制，這里使用wx.getImageInfo獲取網絡圖片臨時路徑

（5）這里圖片均使用網絡圖片

//index.js
const app = getApp()
Page({
  data: {
    cardPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534766809331&di=012cc4ad15d457ffa55c6537503eb84a&imgtype=0&src=http%3A%2F%2Fpicture.5068.com%2Fallimg%2F121120%2F4-1211201G920.jpg',
    headPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http%3A%2F%2Fimg3.100bt.com%2Fupload%2Fttq%2F20140529%2F1401337844678_middle.png',
    sendName: '文字描述描述文字'
  },
  onLoad: function (options) {
    var that = this;
    wx: wx.getSystemInfo({
      success: function (res) {
        that.setData({
          pixelRatio: res.pixelRatio,
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight
        })
      }
    })
    that.drawCanvas();
  },
  //畫圖
  drawCanvas: function () {
    this.setData({
      cardPath: this.data.cardPath,
      headPath: this.data.headPath,
      sendName: this.data.sendName
    });
    let ctx = wx.createCanvasContext('myCanvas');
    let ctxW = this.data.windowWidth;
    let ctxH = 1210;
    // 默認像素比
    let pixelRatio = this.data.pixelRatio;

    // 垂直漸變
    const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
    grd.addColorStop(0, '#ffffff');
    grd.addColorStop(1, '#ffffff');
    ctx.setFillStyle(grd);
    ctx.fillRect(0, 0, ctxW, ctxH);

    wx.getImageInfo({
      src: this.data.cardPath,
      success: (res) => {
        ctx.drawImage(res.path, 15, 15, 345, 470); //card
        wx.getImageInfo({
          src: this.data.headPath,
          success: (res) => {
            /**/
            ctx.arc(46,358,25, 0, 2 * Math.PI)
            ctx.fill()
            ctx.save();
            ctx.beginPath(); //開始繪制
            ctx.clip(); //剪切
            ctx.drawImage(res.path, 23, 333, 50, 50); //userHeader  // 推進去圖片必須是https
            ctx.restore(); //恢復之前保存的繪圖上下文 繼續繪制
            /**/

            ctx.setTextAlign('left');
            ctx.setTextBaseline('middle');
            ctx.setFontSize(16);
            ctx.setFillStyle('#fff');
            this.fontLineFeed(ctx, this.data.sendName, 450, 30, 79, 328);
            ctx.stroke();
            ctx.draw();
          }
        })

      }
    })
  },
  // 保存圖片
  saveImage: function (e) {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(result) {
            wx.showToast({
              title: '圖片保存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })
  },
  // 文字換行
  fontLineFeed: function (ctx, str, splitLen, strHeight, x, y) {
    let strArr = [];
    for (let i = 0, len = str.length / splitLen; i < len; i++) {
      strArr.push(str.substring(i * splitLen, i * splitLen + splitLen));
    }
    let s = 0;
    for (let j = 0, len = strArr.length; j < len; j++) {
      s = s + strHeight;
      ctx.fillText(strArr[j], x, y + s);
    }
  },
})

　（6）頁面顯示樣式

(7)保存圖片為

（8）tips:保存至手機時需配置網絡圖片域名至小程序開發者downloadFile 合法域名下。

　　 tips：微信用戶頭像域名也必須配置 （大坑.........）