Canvasを使用して画像を圧縮するHTML5のサンプルコード

この記事では、canvas を使って画像を圧縮する HTML5 のサンプルコードに関する情報を中心に紹介します。編集者が非常に優れていると感じたので、参考として共有します。

2 日前、画像を Base64 に変換してアップロードする関数を作成しました。画像の Base64 が大きすぎると、リクエストが非常に遅くなり、深刻なタイムアウトになることがわかりました。アップロードする前に画像を圧縮してからバックグラウンドにアップロードすることを考えました。これにより、画像を圧縮するために Canvas を使用するときに遭遇する落とし穴がいくつかあります。完全なコードは記事の最後に記載されています。

最初の落とし穴は、画像を圧縮するときに画像自体の幅と高さが取得されず、携帯電話上にあるため、600*480 の固定の幅と高さが与えられることです。画像をアップロードする場合、常に数メガバイトの画像なので、これは問題ありません。テスト中にアップロードされた画像はすべて小さい画像であり、圧縮された画像のほとんどが空白であったため、この問題が発生しました。そして画像の高さ。

2 番目の落とし穴、1 番目の落とし穴を解決する方法は、画像が読み込まれた (onload) 後に画像自体の幅と高さを取得し、それを Canvas に割り当てて、次のように操作することです。ただし、落とし穴があります。画像の読み込みは非同期であり、戻ったときに、必要な圧縮された Base64 ではなく、未定義のものが返される可能性があります。ここでの解決策は、新しい Promise を作成し、resolve() が結果を返し、呼び出し時に .then() が結果を取得することです。

知識ポイント:

• canvas' toDataURL('image/png', 0.9); Canvas で描画した画像を Base64 に変換します。 1 つのパラメータは画像の種類を表し、2 番目のパラメータは画像の明瞭さを表します。

• 画像自体の幅と高さがこのサイズより大きい場合は、最大の辺に応じて拡大縮小され、その他の辺は次のように設定されます。

miniImage.js

export default async function miniSize(imgData, maxSize = 200*1024){
    // const maxSize = 200 * 1024;

    if(imgData && imgData.files && imgData.files.size < maxSize) {
        return imgData.url;
    }else{
      console.log(&#39;----------------压缩图片-------------------&#39;);
      const canvas = document.createElement(&#39;canvas&#39;);
      let img = new Image();
      img.src = imgData.url;
      let ctx = canvas.getContext(&#39;2d&#39;);
      return new Promise((resolve =>{
        img.addEventListener(&#39;load&#39;, function(){
          //图片原始尺寸
          let originWidth = this.width;
          let originHeight = this.height;
          // 最大尺寸限制
          let maxWidth = 400, maxHeight = 400;
          // 目标尺寸
          let targetWidth = originWidth, targetHeight = originHeight;
          // 图片尺寸超过400x400的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更宽，按照宽度限定尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
          }
          canvas.width = targetWidth;
          canvas.height = targetHeight;
          ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
          let base64 = canvas.toDataURL(&#39;image/png&#39;, 0.9);
          resolve(base64);
        }, false);
      }))
    }
}

Call:

test.js

onChangeImg = async (files, type, index) => {
    let previous = this.props.imagePicker.files;
    if(type === "add") {
      let result = miniSize(files[files.length-1]);
      //使用 .then() 调用获得结果
      await result.then(res => {
         previous.push({url: res});
      });
    }else if(type === "remove") {
        previous.splice(index,1);
    }
    await this.props.dispatch({
      type: 'imagePicker/saveImage',
      payload: {
        files: previous
      }
    })
  }

上記がこの記事の全内容です。皆さんのお役に立てれば幸いです。学習は役に立ちます!

以上がCanvasを使用して画像を圧縮するHTML5のサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。