2日前、画像をbase64に変換してアップロードする機能を作成しました。画像のbase64が大きすぎるとリクエストが非常に遅くなり、深刻なタイムアウトになることがわかったので、画像を圧縮することを考えました。アップロードする前に、それをバックグラウンドにアップロードすると、効率が大幅に向上します。 ここでは、canvas を使用して画像を圧縮するときに遭遇するいくつかの落とし穴を示します。完全なコードは記事の最後に記載されています。
最初の落とし穴は、画像を圧縮するときに画像自体の幅と高さが取得されず、600*480 の固定の幅と高さが与えられることです。携帯電話上にあるため、画像をアップロードするときに画像が取得されません。サイズは数MBなので問題ありません。テスト中にアップロードされた画像はすべて小さい画像であり、圧縮された画像のほとんどが空白であったため、この問題が発生しました。そして画像の高さ。
2 番目の落とし穴。最初の落とし穴を解決する方法は、画像が読み込まれた後 (onload)、画像自体の幅と高さを取得し、それをキャンバスに割り当てる方法です。落とし穴は、画像の読み込みが非同期であるため、戻ったときに、必要な圧縮された Base64 ではなく、未定義のものが返される可能性があることです。ここでの解決策は、新しい Promise を作成し、結果を返し、resolve() を呼び出して、.then() を呼び出したときに結果を取得することです。
知識ポイント:ミニイメージ.js
デフォルトの非同期関数 miniSize(imgData, maxSize = 200*1024){ // const maxSize = 200 * 1024; if(imgData && imgData.files && imgData.files.size < maxSize) { return imgData.url; } .log('----------------圧縮画像-----------------'); document.createElement('canvas'); img = new Image(); img.src = imgData.url; let ctx = Canvas.getContext('2d'); を返します =>{ img.addEventListener( 'load', function(){ // 画像の元のサイズ letoriginWidth = this.width letoriginHeight = 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; = Math.round(maxWidth * (originHeight / OriginWidth)); } else { targetHeight = maxHeight = Math.round(maxHeight * (originHeight / OriginHeight)) } } ctx.drawImage(img, 0, 0, targetWidth, targetHeight); Canvas.toDataURL('image/png', 0.9); 解決(base64) })) }}電話：
テスト.js
onChangeImg = async (ファイル、タイプ、インデックス) => { letPrevious = this.props.imagePicker.files; if(type === add) { let result = miniSize(files.length-1]); .then() を使用して await result.then(res => {Previous.push({url: res}); }); }else if(type === Remove) {前.splice(index,1); } await this.props.dispatch({ タイプ: 'imagePicker/saveImage', ペイロード: { ファイル: 前 } }) }以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。