Wx-小さなプログラムは、スクリーンショットを保存するためにキャンバスを使用しています

1、wxmlページ

ステーションにキャンバスを使用し、イベントをバインドするためのボタンを追加

< ボタンクラス= 'BTN BTN-テーマ' bindtap = 'setSaveImage' >ローカルに画像を保存</ ボタン> 

<！ - キャンバスステーションを使用してください- > 
< キャンバスに隠さ= "{} {} canvasHidden" キャンバス-ID = 'imageCanvas'class =' imageCanvas' 
 スタイル= '幅：{{}} canvasWidth PX; 高さ：{{}} canvasHeight PX'無効-スクロール真へ= '' > 

</ キャンバス>

2、JSファイル結合アプローチ

/ * * 
   *保存の写真ローカル
   * / 
  setSaveImage：機能（E）{
     VAR = これを、
    wx.showLoading（{ 
      タイトル： '画像生成...' 、
    }）
    のvar RES = '' ;
     // コールペイント方法
    that.drawImages（）; 
    
  } 
  
  / * * 
   *ペイント方法
   * / 
  drawImages：関数（）{ 
    LET = この;
     // にconsole.log（that.data）; 
    that.canvasHidden = falseに;
     //は、図を回転させます。写真
    //that.data.imgUrls banner_image = VAR [0]; 
    
    // ネットワークアドレスは、画像のキャンバスで傍受することができないので、インタフェース情報を取得するマイクロチャネルの画像の使用は、ピクチャのネットワークアドレスを設定する 
    that.getImageInfoを（that.data.imgUrls [0 ]） ; 
    
    // Dバーコード画像
    VAR qrcode_image = that.data.imagePath;
     // タイトル
    VARのタイトル= that.data.goodsInfo.title; 

    LETコンテキスト = wx.createCanvasContext（ 'imageCanvas' 、すなわち）; 
    context.setFillStyle（ '＃ FFF ' ）;
     // 矩形の幅と高さ描画 
    context.fillRect（0、0、375、356 ）; 

    // カルーセル図描く 
    context.drawImage（that.data.banner_image_url、0、0、375180を）; 
    
    // ドロー見出し
    context.setFontSize（14 ）; 
    context.setFillStyle（ "＃000" ）
    context.fillText（タイトル、 26、228である）   // 描画記述

    // 2次元コードパターンの幅高さXY描画   
    context.drawImage（qrcode_image、228、200であるが、 130、130 ）;
     // context.draw（）; 
    context.draw（falseに、that.drawCallBack）; 

  } 
  
    / * * 
   *描画キャンバスコールバック関数
   * / 
  drawCallBack：関数（）{
     VAR = この
    wx.canvasToTempFilePathを（ { 
      // X：0、
      // Y：0、
      //幅：that.data.canvasWidth、
      // 高さ：that.data.canvasHeight、 
      canvasId 'imageCanvas' 、
      たfileType： 'JPG' 、
      成功：関数（RES）{
         VAR shareImg = res.tempFilePath。
        // にconsole.log（shareImg）
        wx.saveImageToPhotosAlbum（{ 
          filePathに：res.tempFilePath、
          成功（RES）{ 
            wx.hideLoading（）; 
            wx.showToast（{ 
              タイトル： '保存成功' 、
              アイコン： '成功' 、
              時間： 2000
            }）; 
          } 
        }）

      }、
      失敗：機能（RES）{ 
        cosole.log（RES、 '<-fail RES' ）
      } 
    }）
  } 
    
    / * * 
   *设置画布宽高
   * / 
  setCanvasSize：関数（）{
     VAR = この; 
    wx.getSystemInfo（{ 
      成功：関数（RES）{ 
        にconsole.log（RES）; 
        VAR myCanvasWidth = res.windowWidth;
         VAR myCanvasHeight = res.windowHeight; 
        that.setData（{
          canvasWidth：myCanvasWidth、
          canvasHeight：myCanvasHeight 
        }）; 
      } 
    }）
    
  } 

  / * * 
   * URLに応じた画像情報を取得する
   * / 
  getImageInfo（ewmbgurl）{ 
    IF（typeof演算 ewmbgurl === '文字列' ）{
       VAR = この; 
      WX .getImageInfo（{    //   アプレットは、イメージAPIの取得
        ewmbgurl：SRC 
        成功：関数（RES）{ 
          that.setData（{ 
            banner_image_url：res.path 
          }）
        } 
        失敗（ERR）を{
          console.log（ERR）
        } 
      }）
    } 
  }、

図3に示すように、キャンバスの方法は、APIを記載しました

/ * * 
  * X => X座標
  * Y => y座標
  *幅=>矩形幅
  *高さ=>長方形高
* / 
    context.fillRect（ 0、0、375、356 ）; 

/ * * 
* = X> X座標
* Y => y座標
* / 
context.fillText（タイトル、 26であり、228 ）
    
/ * * 
  * img_url =>イメージアドレス
  * X => x座標
  * Y => y座標
  *幅=>長方形の幅
  *高さ=>長方形の高
* / 
context.drawImage（qrcode_image、 228、200は、130、130 ）; 
    
/ * * 
  もし*ブール=>次に、最後の描画
  * that.drawCallBack =>コールバック
* / 
context.draw（偽、that.drawCallBack）。

4ノート

1 。アドレスは絵のネットワークアドレスは、スクリーンショットのIDEで正常に見えることがありますが、電話で空白になる場合は、上記の使用をお勧め
    取得した画像情報方法
 2を。スクリーンショットキャンバスの幅と高さや位置を自分のニーズに応じて修飾は、
 3 取得方法、画像情報が非同期通知であるので、キャンバスのその後の操作は、操作の成功の内部に配置することができます

著者：ニンジンの代わりにジャガイモを
リンクします。https：//www.jianshu.com/p/657785af9c07 出典：ジェーンの本