ホームページ > 記事 > ウェブフロントエンド > JSでの画像圧縮方法まとめ

JSでの画像圧縮方法まとめ

韦小宝オリジナル: 2018-01-08 10:57:461603ブラウズ

この記事では主に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(&#39;2d&#39;);
  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 ドキュメントを参照してください

4. CanvasResizetoDataURL(canvas,quality) は、Canvas オブジェクトを dataURL 文字列に圧縮します。 ; 品質パラメータは 0 ～ 1 の数値タイプで渡され、画像圧縮品質を示します。コードは次のとおりです:

toDataURL API は MDN ドキュメント

5 を参照できます。 (file,fn) ファイル (Blob) タイプのファイルは dataURL 文字列に変換されます。ファイルパラメーターはファイル (Blob) タイプのファイルで渡されます。fn は dataURL 文字列パラメーターを含むコールバックメソッドです。

function canvasResizetoFile(canvas,quality,fn){
  canvas.toBlob(function(blob) {
    fn(blob);
  },&#39;image/jpeg&#39;,quality);
};

6 . dataURLtoImage(dataurl,fn) は、dataURL 文字列の文字列を Image タイプのファイルに変換します。このファイルでは、dataurl パラメータが dataURL 文字列で渡され、fn はコールバックメソッドです。 Image タイプのファイルのパラメータを含むコードは次のとおりです:

methods.canvasResizetoDataURL = function(canvas,quality){
  return canvas.toDataURL(&#39;image/jpeg&#39;,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);
};

3. さらにカプセル化

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(&#39;,&#39;), 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});
};

この場合、上記の 8 つのメソッドをパッケージ化して github に置いておきます。気に入ったらスターを付けてください。難しい。

ps: JSで画像を等比率で圧縮する方法を見てみましょう

function fileResizetoFile(file,quality,fn){
  filetoDataURL (file,function(dataurl){
    dataURLtoImage(dataurl,function(image){
      canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
  })
}

まとめ

以上がJSで紹介した画像圧縮の方法ですby 編集者まとめ、皆さんのお役に立てば幸いです！

JSでの画像圧縮方法まとめ

関連記事