ウィジェットcanvas 2 dでハイビジョン画像を描くソリューションで、最大10 Mポスターを生成し、幅の広いアンドロイドの下で画像を生成する失敗の問題を解決します.

wx.canvasToTempFilePath
周知のように、微信canvasは画像を生成してこのインタフェースを呼び出すが、このインタフェースはハイビジョンの画像を生成したい場合、フォントのぼやけた問題を解決するにはdestWidth * dprが必要である.
元のcanvasの幅が大きすぎて、destWidth * dprを加えるとdestWidthの幅が大きすぎて、アンドロイドが画像を生成するときに失敗する可能性があります.
このインタフェースが通じない以上、このインタフェースは使いません.
言い換えれば、ウィジェットcanvas type=2 dインタフェース、サポートされているベースライブラリも比較的包括的で、公式紹介によるとcanvas type=2 dは基本的にH 5のインタフェースを参照しているので、H 5が利用できる方法は、ここで使えるはずです.
canvas 2d
WeChatが提供する例によると、

Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        ctx.fillRect(0, 0, 100, 100)
      })
   }
})

canvas 2 dハイビジョンを描画し、文字がぼやけないようにするにはcanvas.それはどこだ?heightは、dprを明示的に設定し、dprを乗算します(wxssも通常の幅に設定します).同時に、描画コンテキストctxをdprにスケールする必要があります.
ctxスケールdprは、描画密度を画素密度と一致させるためである.描画をスケールしたくないものがある場合はctxを設定できます.setTransform(1,0,0,1,0,0)は、ペイントコンテキストのスケールを復元します.
今大胆に描きましょう.描画の密度は画素密度に等しいので、実際に表示するのは非常にはっきりしています.canvas 2 dの幅の高さは大きく設定できますが、大きすぎてはいけませんよ.大きすぎて、アンドロイドの下でcrashの問題があります.
実機試験1500800の幅の高さは全く問題なく,画素密度のためdpr=3の場合,実際には4502400であった.
あんなに広い幅でwxを使っています.canvasToTempFilePathではアンドロイドの画像生成に失敗する可能性が高いので、神器を祭るべきです.

_canvas_.toDataURL(_type_, _encoderOptions_);

HTMLCanvasElement.toDataURL()メソッドは、ピクチャディスプレイを含むdata URIを返す.typeパラメータは、そのタイプを使用できます.デフォルトはPNGフォーマットです.画像の解像度は96 dpiです.

typeオプション、ピクチャフォーマット、デフォルトはimage/png

です.

encoderOptionsはオプションで、指定されたピクチャフォーマットはimage/jpeg image/webp ， 0 1 です.値範囲外の場合、デフォルト値0.92が使用されます.他のパラメータは無視されます.

canvas.toDataURL()によってピクチャ表示を含むdata URIが得られ、ヘッダdata:image/jpeg;base64,を削除することによって純粋なbase 64のピクチャデータが得られる.
画像データが得られた以上、データを画像に書き込めばよい.

ウィーチャットが提供するファイルマネージャ

を開く.

base 64データをbuffer

に変換

はfsmを通過する.writeFileは、ユーザ記憶領域wx.env.USER_DATA_PATHにファイルを書き込む.

file Pathは画像です

微信の記憶空間は10 Mしかないので、最大10 Mの画像生成をサポートできますよ.多くのニーズを満たすことができます.

const filePath = `${wx.env.USER_DATA_PATH}/cover.jpg`;
let fsm = wx.getFileSystemManager();
let buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
     filePath: filePath,
     data: buffer,
     encoding: 'binary',
     success() {
         console.log('---success---', filePath);
     },
     fail(error) {
        console.error(error);
     }
 });

使い終わったら、ストレージスペースを掃除するのを忘れないでください.そうしないと、次は保存できません.

  removeLocalFile() {
    //   ，       10M
    //         ，          
    const fsm = wx.getFileSystemManager();
    try {
      const ls = fsm.readdirSync(wx.env.USER_DATA_PATH);
      ls.forEach(d => {
        let path = `${wx.env.USER_DATA_PATH}/${d}`;
        let stats = fsm.statSync(path);
        if (stats.isFile()) {
          fsm.unlinkSync(path);
        }
      });
    } catch (e) {
      console.log(e);
    }
  }

必要に応じて異なるファイルを空にすることができ、ルートディレクトリのすべての内容を空にする必要はありません.
これでcanvas 2 dを使ってハイビジョン画像を楽しく描くことができます.