ホームページ > 記事 > ウェブフロントエンド > JSでの画像圧縮方法まとめ
この記事では主にJSで画像を圧縮する方法を紹介します。jsに興味がある友人はこの記事を参照してください
まず、私たちがどのようなニーズを持っているかを考えてください。ほとんどの場合、ファイル オブジェクト を圧縮してから、それを File オブジェクトに変換してリモート画像サーバーに渡す必要があります。場合によっては、base64 文字列 を圧縮してから、base64 文字列に変換する必要もあります。それをリモート データベースに渡します。場合によっては、画像の URL アドレスを圧縮してリモートの場所にアップロードする必要があります。 1 つの画像:
代替テキスト
2. 解決策
上の図に示すように、Wang Er は合計 7 つのメソッドを作成しました。これらは基本的に JS のほとんどのファイル タイプの変換と圧縮をカバーします。その中には:
1. urltoImage(url,fn) は URL を通じて必要な画像オブジェクトを読み込みます。url パラメーターは画像の URL に渡され、fn は画像のパラメーターを含むコールバック メソッドです。コードは次のとおりです:
function urltoImage (url,fn){ var img = new Image(); img.src = url; img.onload = function(){ fn(img); } };
2. imagetoCanvas(image) は Image オブジェクトを Canvas タイプのオブジェクトに変換します。コードは次のとおりです。 :
function imagetoCanvas(image){ var cvs = document.createElement("canvas"); var ctx = cvs.getContext('2d'); cvs.width = image.width; cvs.height = image.height; ctx.drawImage(image, 0, 0, cvs.width, cvs.height); return cvs ; };
3. CanvasResizetoFile(canvas ,quality,fn) は Canvas オブジェクトを圧縮して Blob タイプのオブジェクトに変換します。画像の圧縮品質を示す 0 ~ 1 の数値タイプ。fn は Blob オブジェクトのパラメータを含むコールバック メソッドです。コードは次のとおりです。ファイルオブジェクトに。 BLOB は、必ずしも
JavaScript ネイティブ形式であるとは限らないデータを表します。 File インターフェイスは Blob に基づいており、Blob の機能を継承し、ユーザーのシステム上のファイルをサポートするようにそれを拡張しています。これをファイル タイプとして扱うことができます。詳細な使用法については、MDN ドキュメントを参照してください
function canvasResizetoFile(canvas,quality,fn){ canvas.toBlob(function(blob) { fn(blob); },'image/jpeg',quality); };
methods.canvasResizetoDataURL = function(canvas,quality){ return canvas.toDataURL('image/jpeg',quality); };
7. dataURLtoFile(dataurl) は、dataURL パラメータが渡される、dataURL 文字列の文字列を Blob タイプのオブジェクトに変換します。 dataURL 文字列内のコードは次のとおりです:
function filetoDataURL(file,fn){ var reader = new FileReader(); reader.onloadend = function(e){ fn(e.target.result); }; reader.readAsDataURL(file); };
File オブジェクトを圧縮して File オブジェクトに変換する一般的に使用される方法については、次のようにします。上記のメソッドを再度カプセル化するには、次のコードを参照してください:
function dataURLtoImage(dataurl,fn){ var img = new Image(); img.onload = function() { fn(img); }; img.src = dataurl; };
そのうち、ファイルパラメータはファイル (Blob) タイプのファイルで渡され、品質パラメータは 0 の数値タイプで渡されます。 -1 は画像の圧縮品質を示します。fn はコールバック メソッドであり、Blob タイプ ファイルのパラメータが含まれます。
それは次のように動作します:function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); };
function fileResizetoFile(file,quality,fn){ filetoDataURL (file,function(dataurl){ dataURLtoImage(dataurl,function(image){ canvasResizetoFile(imagetoCanvas(image),quality,fn); }) }) }
まとめ
以上がJSで紹介した画像圧縮の方法ですby 編集者 まとめ、皆さんのお役に立てば幸いです!
関連する推奨事項:
JS 圧縮アップロード画像 js 画像カルーセル手動切り替えエフェクトのサンプル コード
JS 画像のプリロード例
以上がJSでの画像圧縮方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。