微信ウィジェット開発-(画像base 64符号化)

Base 64符号化は、ネットワーク上で最も一般的な8 Bitバイトコードを伝送するための符号化方式の1つであり、HTTP環境下で長い識別情報を伝送するために使用することができるため、多くの画像に関するアプリケーションまたはインタフェース呼び出しにおいてbase 64符号化は、画像データを伝送するために使用されることが多い.
Base 64符号化は、ウィジェットにおいて特に完全ではないが、このような問題を解決するために、本稿では、具体的なアプリケーションシーンに基づいて、画像のBase 64符号化を取得するための3つの方法をまとめた.
1.canvas画図
適用シーン:canvasが描いたピクチャのbase 64符号化を取得し、以前のバージョンのウィジェット(1.9.9以前)を使用する欠点:canvasはスクリーンサイズと同じピクチャしか描けず、ピクチャサイズがスクリーンサイズを超えると、スクリーンの一部のピクチャのbase 64符号化を取得できない.

canvas = wx.createCanvasContext(canvas_id)
//      canvas， imgPath      
canvas.drawImage(imgPath, 0, 0, imgWidth, imgHeight)
canvas.draw(false, () => {
  wx.canvasGetImageData({
    canvasId: canvas_id,
    x: 0,
    y: 0,
    width: imgWidth,
    height: imgHeight,
    success(res) {
      //   png  
      let pngData = upng.encode([res.data.buffer], res.width, res.height)
      //  png        base64  
      let base64 = wx.arrayBufferToBase64(pngData)
      // ...
    }
  })
})

2.ウィジェットを使用してインタフェースを持参する:
適用シーン:このインタフェースは微信が最近完備しているため、微信のバージョンが高い(1.9.9以降)必要がある.画像のスケーリングなどの操作が不要な場合には、任意のサイズの画像のbase 64符号化を取得することができる.欠点:base 64符号化は、所与のピクチャに対してのみ計算され、より一般的には、ピクチャの幅をスクリーンの幅以下にスケールする必要がある.

// Base64
let base64 = wx.getFileSystemManager().readFileSync(imgPath, "base64")

3.バックグラウンドサーバによる処理
適用シーン:base 64符号化は、ピクチャをスケーリングするなどの前処理を行ってから取得する.欠点:クラウドサーバを導入する必要があり、符号化速度が遅い.

#      Flask         base64     ，    .
@app.route('/get_base64', methods=['GET','POST'])
def trans_base64():
    data_dir = './data/image'
    file_obj = request.files["img"].read()   
    width = int(round(float(request.form.get('width'))))
    height = int(round(float(request.form.get('height'))))

    img = Image.open(BytesIO(file_obj))
    img = img.resize((width, height), Image.ANTIALIAS)
    output_buffer = StringIO()
    img.save(output_buffer, format='png')
    binary_data = output_buffer.getvalue()
    base64_data = base64.b64encode(binary_data)
    return base64_data

#      base64    .
wx.uploadFile({
    url: 'your_host_address:port/get_base64',
    filePath: path,
    formData: {
      'width': sys_width, // resize width.
      'height': sys_width / img_radio // resize height.
    },
    success: function (res) {
      let base64 = res.data
      console.log("base64 is :", base64)
    }
})

まとめ
以前、画像のbase 64符号化を計算する上で多くの曲がり角を歩いて、いつもバックグラウンドのインタラクションを通じてこのことを解決したいと思っていました.そこで、ネット上の多くのチュートリアルを見て、次のコードに似ています.

urlTobase64(url){
    request({
      url:url,
      responseType: 'arraybuffer', 
      success:res=>{
            let base64 = wx.arrayBufferToBase64(res); 
            base64　= 'data:image/jpeg;base64,' + base64　
            console.log(base64)
          }
    })
 }


wx.chooseImage({
      success:res=>{
        this.urlTobase64(res.tempFilePaths[0]) 
      }
})

初歩的には問題なく、pc端末の開発テストで正常に動作するが、携帯電話端末のテストを使用するとworkしない.後で考えてみると、私たちが手に入れた画像の一時アドレス(res.tempFilePaths[0])はhttpで始まるが、微信はhttpタイプのrequestをサポートしないことを明確に規定しているので、携帯電話でテストすると問題がある.
作者:傻豆蜗壳链接:https://www.jianshu.com/p/6ae3e2115a2e