画像アップロードとキャンバス圧縮処理の解析

画像のアップロードを行う場合、通常、バックエンドのインターフェースがアップロードする画像のサイズを制限したり、バックエンドがサイズを制限していなくても、画像が大きすぎてフロントエンドでのレンダリングに時間がかかり、ページの読み込みが悪くなるという状況に遭遇することがあります。そのため、アップロードされた画像を圧縮することが必要です。

この記事は、gitthubに収録されています。 github.com/michael-lzg...

この記事は、以下の処理を対象としています。

• ユーザーが input 画像を選択するためのボックス
{を使用します。 を使用します。 FileReader 画像プレビュー用
• に画像を描画します。 canvas キャンバス上
• を使用します。 canvas 画像圧縮のためのキャンバス機能
• 圧縮された Base64(DataURL) 形式を Blob アップロード用オブジェクト

画像を取得するための入力タグ

を設定することで input のタグを使用します。 type 属性は file を設定し、ユーザーがファイルを選択できるようにします。 accept 選択するファイルの種類を制限するために、バインド

onchange

• : read メソッドを実行し、読み込みが完了すると <input type="file" accept="image/*" onchange="loadFile(event)" プロパティは FileReader フォーマット（Base64 エンコード）の文字列で、画像の内容を表します。

画像アップロードでは FileReader メソッドで読み込まれ、そのファイルは FileReader.onload プロパティを使用して、画像の load を実装し、そのデータを使って画像プレビュー機能

FileReader.readAsDataURL

キャンバス圧縮画像

これが画像アップロード圧縮の肝で、まずは result メソッドを使用してアップロードされた画像ファイルをキャンバス上に描画し、その後に Data URL に変換して、キャンバス上の画像情報を readAsDataURL() の書式付きデータです。

drawImage()

result メソッドは、画像、キャンバス、またはビデオをキャンバス上に描画します。 Base64(DataURL) メソッドは、画像の特定の部分を描画したり、画像のサイズを大きくしたり小さくしたりすることもできます。パラメータは以下の通りです。

• img は、使用する画像、キャンバス、またはビデオを指定します。
• sx 任意。クリッピングを開始する x 座標の位置。
• sy オプション。クリッピングを開始するy座標の位置.
• swidth オプションです。切り取る画像の幅を指定します。
• sheight 任意。切り取る画像の高さ。
• x 画像が配置されるキャンバス上のx座標の位置。
• y キャンバス上の画像の y 座標の位置を配置します。
• width 任意。使用する画像の幅を指定します。（画像を引き伸ばしたり縮めたりする）
• height 任意。使用する画像の高さを指定します。（画像を引き伸ばす、または縮小する）

<div class="container">
  <input type="file" accept="image/*" onchange="loadFile(event)" />
</div>
<script>
  const loadFile = function (event) {
    let file = event.target.files[0]
    const reader = new FileReader()
    reader.onload = function () {
      console.log(reader.result)
      ...
    }
    reader.readAsDataURL(file)
  }
</script>

Canvas.toDataURl()

CanvasRenderingContext2D.drawImage() メソッドを使用すると Canvas.toDataURL() の情報を、キャンバス上の base64(DataURL) 形式、つまり画像の純粋な文字表現です。このメソッドは2つのパラメータをとります。

• drawImage() (オプション): 変換される画像を示す drawImage() タイプになります。デフォルト値は var cas = document.querySelector('canvas') var ctx = cas.getContext('2d') // Create the image object first var img = new Image() img.src = '. /images/1.jpg' // After the image is loaded img.onload = function () { ctx.drawImage(img, 206, 111, 32, 38, 100, 100, 32, 38) } であり、また Canvas.toDataURl() と {コード などです。
• {コード (オプション): quality は、変換された画像の品質を示す。0から1の範囲で指定する。 canvas である必要があります。 base64(DataURL) または {コード など {コード の値は無効です。デフォルトの圧縮品質は0.92です。

mimeType

ここまでは、キャンバスの圧縮画像のコードから説明します。

mimeType

base64をファイルに変換する

• によって {コード 遺言 {コード 文字列 {コード (バイナリテキスト)です。
• となるバイナリ文字列。 image/png は次のように構成されます。 image/jpeg の書式を使用します。
{を使用します。 使用方法 {コード ウィル image/webp にフォーマットされたバイナリテキストを送信します。 {{コード .

quailty

サーバーに画像をアップロードする

を作成します。 mimeType を置くと image/jpeg に追加します。 image/webp の中で、サーバー側のインターフェイスを要求し、画像を送信します。

mimeType

追記：実際の開発では、画像を変換して var canvas = document.createElement('canvas') canvas.toDataURL("image/jpeg" 0.8) のフォームをサーバーサイドに送るかどうかは、特定のビジネスニーズに依存します。Tencent Cloudに画像をアップロードして、直接 function compress(base64, quality, mimeType) { let canvas = document.createElement('canvas') let img = document.createElement('img') img.crossOrigin = 'anonymous' return new Promise((resolve, reject) => { img.src = base64 img.onload = () => { let targetWidth, targetHeight if (img.width > MAX_WIDTH) { targetWidth = MAX_WIDTH targetHeight = (img.height * MAX_WIDTH) / img.width } else { targetWidth = img.width targetHeight = img.height } canvas.width = targetWidth canvas.height = targetHeight let ctx = canvas.getContext('2d') ctx.clearRect(0, 0, targetWidth, targetHeight) // Clear the canvas ctx.drawImage(img, 0, 0, canvas.width, canvas.height) let imageData = canvas.toDataURL(mimeType, quality / 100) resolve(imageData) } }) } には、アップロード用の画像URLを指定します。

画像アップロードとキャンバス圧縮の流れについてはこの記事でまとめています。画像アップロードとキャンバス圧縮については、スクリプトハウスの過去記事を検索していただくか、引き続き以下の関連記事を閲覧してください。