小程序 canvas實現圖片預覽，圖片保存

wxml 代碼：

<view class="result-page">
 <canvas  bindtap="previewImage" canvas-id='myPicCanvas' style='width:100%;height:600px;margin: 0;padding: 0;display: block;background-color:#eeeeee'></canvas>
  <button  bindtap="savePic">保存圖片</button>
</view>

js代碼：

/**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    this.drawCanvasPic();
    
  },
  previewImage: function () {
    console.log(1);
    wx.canvasToTempFilePath({
      canvasId: 'myPicCanvas',
      success: function (res) {
        var tempFilePath = res.tempFilePath;
        console.log(tempFilePath);
        wx.previewImage({
          current: tempFilePath, // 當前顯示圖片的http鏈接  
          urls: [tempFilePath] // 需要預覽的圖片http鏈接列表  
        })
      },
      fail: function (res) {
        console.log(res);
      }
    });

  },
  drawCanvasPic: function () {
    let ctx = wx.createCanvasContext('myPicCanvas');
    let ctxW = 100;
    let ctxH = 700;
    // 默認像素比

    // 屏幕系數比，以設計稿375*667（iphone7）為例
    let XS =  375;

    
    /* 繪制頭像 */
    let avatarurl_width = 100;    //繪制的頭像寬度
    let avatarurl_heigth = 100;   //繪制的頭像高度
    let avatarurl_x = 50;   //繪制的頭像在畫布上的位置
    let avatarurl_y = 50;   //繪制的頭像在畫布上的位置
    ctx.save();

    ctx.beginPath(); //開始繪制
    //先畫個圓   前兩個參數確定了圓心 （x,y） 坐標  第三個參數是圓的半徑  四參數是繪圖方向  默認是false，即順時針
    ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

    ctx.clip();//畫好了圓 剪切  原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內 這也是我們要save上下文的原因
    
    ctx.drawImage('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2369419058,1797305489&fm=27&gp=0.jpg', avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推進去圖片，必須是https圖片

    ctx.restore(); //恢復之前保存的繪圖上下文 恢復之前保存的繪圖上下午即狀態 還可以繼續繪制 

    ctx.draw(); //可將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中
  },
  savePic: function (e) {
    console.log(111);
    wx.canvasToTempFilePath({
      canvasId: 'myPicCanvas',
      success: function (res) {
        console.log(res);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(result) {
            wx.showToast({
              title: '圖片保存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })
  },