プロジェクトでIDカード認識を行う際、画像をbase64形式でエンコードして送信する必要があるのですが、携帯電話で撮った写真が大きすぎてbase64に変換するのは大変なので解決策を見つけました。
関係する知識ポイント <!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換コンテンツ=ie=edge> <title>ドキュメント</title></head><body> <input type=file onchange=loadImg(this)> <hr> <div>800×449, 544KB</div> <img src= <hr> <div>400×224, 157KB</div> <canvas></canvas> <script> // 画像アップロード関数loadImg(me) { let img = document.querySelector('img'); let cvs = document.querySelector('canvas'); me.files[0]; // ファイル オブジェクトを取得します // アップロードされた画像が 500KB より大きい場合のみ圧縮します if (file && (file.size / 1024 > 500)) { let Reader = new FileReader(); .readAsDataURL( file); // Base64 エンコーディングに変換します Reader.onload = function (e) { let NaturalBase64 = e.target.result; // Base64 を取得しますエンコーディング、これは元の画像です img.src = NaturalBase64; img.onload = function () { let rate = img.naturalWidth / img.naturalHeight; // 等しい比率で圧縮するために、元の画像の比率を取得します。幅 = 400; cvs .height = cvs.width / 比率 ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // 圧縮後の新しい画像の Base64 を描画します let zipBase64 = cvs.toDataURL(); </body></html>レンダリング
圧縮画像サイズについて以下に示すのは、すぐに使用できるメソッドです。baseStr は完全な Base64 エンコーディングです。
Base64
コード：
関数 calcBase(baseStr){ var tag = 'base64,'; baseStr = baseStr.substring(baseStr.indexOf(tag)+tag.length) var eqTagIndex = BaseStr.indexOf('='); 1?baseStr.substring(0,eqTagIndex):baseStr; - (strLen / 8) * 2; console.log(ファイル サイズ: + (fileSize / 1024).toFixed(1) + 'KB');}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。