JSを使用して画像を効果的に圧縮する方法

関数 file2DataUrl(ファイル, コールバック) {
 var リーダー = 新しい FileReader();
  reader.onload = 関数（）{
    コールバック(reader.result);
  };
  reader.readAsDataURL(ファイル);
}

データ:<メディアタイプ>,<データ>

関数file2Image(ファイル、コールバック) {
 var image = 新しい Image();
 var URL = window.webkitURL || window.URL;
 (URL) {
 var url = URL.createObjectURL(ファイル);
    イメージ.onload = 関数() {
      コールバック(画像);
      URL.revokeObjectURL(url);
    };
    イメージのURLをコピーします。
  } それ以外 {
    inputFile2DataUrl(ファイル、関数(dataUrl) {
      イメージ.onload = 関数() {
        コールバック(画像);
      }
      画像のサイズは、
    });
  }
}

関数 url2Image(url, コールバック) {
 var image = 新しい Image();
  イメージのURLをコピーします。
  イメージ.onload = 関数() {
    コールバック(画像);
  }
}

関数 image2Canvas(画像) {
 var キャンバス = document.createElement('キャンバス');
 var ctx = canvas.getContext('2d');
  キャンバスの幅 = image.naturalWidth;
  キャンバスの高さ = image.naturalHeight;
  ctx.drawImage(画像、0、0、キャンバス.幅、キャンバス.高さ);
 キャンバスを返します。
}

関数 canvas2DataUrl(キャンバス、品質、タイプ) {
 canvas.toDataURL(type || 'image/jpeg', quality || 0.8) を返します。
}

関数 dataUrl2Image(dataUrl, コールバック) {
 var image = 新しい Image();
  イメージ.onload = 関数() {
    コールバック(画像);
  };
  画像のサイズは、
}

関数 dataUrl2Blob(dataUrl, type) {
 var data = dataUrl.split(',')[1];
 var mimePattern = /^data:(.*?)(;base64)?,/;
 var mime = dataUrl.match(mimePattern)[1];
 var binStr = atob(データ);
 var arr = 新しい Uint8Array(len);

 (var i = 0; i < len; i++) の場合 {
    arr[i] = binStr.charCodeAt(i);
  }
 新しいBlob([arr], {type: type || mime})を返します。
}

関数 canvas2Blob(キャンバス、コールバック、品質、タイプ){
  canvas.toBlob(function(blob) {
    コールバック(blob);
  }, タイプ || 'image/jpeg'、品質 || 0.8);
}

HTMLCanvasElement.prototype.toBlobの場合{
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  値: 関数 (コールバック、タイプ、品質) {
 dataUrl = this.toDataURL(type, quality); とします。
    コールバック(dataUrl2Blob(dataUrl));
  }
 });
}

関数 blob2DataUrl(blob, コールバック) {
  file2DataUrl(blob、コールバック);
}

関数blob2Image(blob, コールバック) {
  file2Image(blob、コールバック);
}

関数アップロード(URL、ファイル、コールバック) {
 var xhr = 新しい XMLHttpRequest();
 var fd = 新しいFormData();
  fd.append('ファイル', ファイル);
  xhr.onreadystatechange = 関数 () {
 xhr.readyState === 4 && xhr.status === 200 の場合 {
 //アップロード成功コールバック && callback(xhr.responseText);
    } それ以外 {
 新しいエラーをスローします(xhr);
    }
  }
  xhr.open('POST', url, true);
  xhr.send(fd);
}

関数アップロード(url, ファイル) {
 var リーダー = 新しい FileReader();
 var xhr = 新しい XMLHttpRequest();

  xhr.open('POST', url, true);
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

  リーダー.onload = 関数() {
    xhr.send(リーダーの結果);
  };
  reader.readAsBinaryString(ファイル);
}

/**
 * シンプルな画像圧縮方法* @param {Object} オプション関連のパラメータ*/
(関数 (win) {
 var REGEXP_IMAGE_TYPE = /^image\//;
 var util = {};
 var デフォルトオプション = {
    ファイル: null、
    品質: 0.8
  };
 var isFunc = function (fn) { return typeof fn === 'function'; };
 var isImageType = function (値) { return REGEXP_IMAGE_TYPE.test(値); };

 /**
   * シンプルな画像圧縮コンストラクター * @param {Object} オプション関連のパラメーター */
 関数SimpleImageCompressor(オプション) {
    オプション = Object.assign({}, defaultOptions, オプション);
 this.options = オプション;
 this.file = オプション.file;
 これを初期化します。
  }

 var _proto = SimpleImageCompressor.prototype;
  win.SimpleImageCompressor = SimpleImageCompressor;

 /**
   * 初期化 */
  _proto.init = 関数init() {
 var _this = これ;
 var ファイル = this.file;
 var オプション = this.options;

 if (!file || !isImageType(file.type)) {
      console.error('画像ファイルをアップロードしてください!');
 戻る;
    }

 if (!isImageType(options.mimeType)) {
      オプション.mimeType = ファイル.type;
    }

    util.file2Image(ファイル、関数(画像) {
 var キャンバス = util.image2Canvas(img);
      ファイルの幅 = img.naturalWidth;
      ファイルの高さ = img.naturalHeight;
      _this.beforeCompress(ファイル、キャンバス);

      util.canvas2Blob(キャンバス、関数(blob) {
        キャンバスの幅をピクセル単位で指定します。
        キャンバスの高さを blob に設定します。
        オプション.成功 && オプション.成功(blob);
      }、options.quality、options.mimeType)
    })
  }

 /**
   * 圧縮前、画像フック関数の読み取り後 */
  _proto.beforeCompress = 関数beforeCompress() {
 if (isFunc(this.options.beforeCompress)) {
 this.options.beforeCompress(this.file);
    }
  }

 // `util` パブリック メソッドの定義を省略 // ...

 // インスタンスの静的プロパティに `util` パブリックメソッドを追加します for (key in util) {
 （util.hasOwnProperty（キー））の場合{
      SimpleImageCompressor[キー] = util[キー];
    }
  }
}）（ウィンドウ）

var fileEle = document.getElementById('file');

fileEle.addEventListener('change', 関数() {
  ファイル = this.files[0];

 var オプション = {
    ファイル: ファイル、
    品質: 0.6、
    mimeタイプ: 'image/jpeg',
 // 圧縮前のコールバック beforeCompress: function (result) {
      console.log('圧縮前の画像サイズ: ', result.size);
      console.log('MIMEタイプ: ', result.type);
 // アップロードした画像をページ上でプレビューします // SimpleImageCompressor.file2DataUrl(result, function (url) {
 // document.getElementById('origin').src = url;
 // })
    },
 // 圧縮成功コールバック success: function (result) {
      console.log('圧縮後の画像サイズ: ', result.size);
      console.log('MIMEタイプ: ', result.type);
      console.log('圧縮率: ', (result.size / file.size * 100).toFixed(2) + '%');

 // 圧縮された画像を生成し、ページに表示します // SimpleImageCompressor.file2DataUrl(result, function (url) {
 // document.getElementById('output').src = url;
 // })

 // リモート サーバーにアップロード // SimpleImageCompressor.upload('/upload.png', result);
    }
  };

 新しい SimpleImageCompressor(オプション);
}、 間違い）;

var アスペクト比 = 自然な幅 / 自然な高さ;
var width = Math.max(options.width, 0) || naturalWidth;
var height = Math.max(options.height, 0) || naturalHeight;
高さ * アスペクト比 > 幅の場合 {
  高さ = 幅 / アスペクト比;
} それ以外 {
  幅 = 高さ * アスペクト比;
}

関数 image2Canvas(image, destWidth, destHeight) {
 var キャンバス = document.createElement('キャンバス');
 var ctx = canvas.getContext('2d');
  キャンバスの幅 = destWidth || image.naturalWidth;
  キャンバスの高さ = destHeight || image.naturalHeight;
  ctx.drawImage(画像、0、0、キャンバス.幅、キャンバス.高さ);
 キャンバスを返します。
}

// `png` 形式の画像サイズが `convertSize` を超える場合は、`jpeg` 形式に変換します。if (file.size > options.convertSize && options.mimeType === 'image/png') {
  オプション.mimeType = 'image/jpeg';
}
// 一部のコードを省略 // ...
// ユーザーが期待する出力の幅と高さがソース画像の幅と高さより大きくない場合、出力ファイルのサイズはソースファイルより大きくなり、ソースファイルが返されます if (result.size > file.size && !(options.width > naturalWidth || options.height > naturalHeight)) {
  結果 = ファイル;
}

// ...
// 最小および最大の幅と高さを制限します var maxWidth = Math.max(options.maxWidth, 0) || Infinity;
var maxHeight = Math.max(options.maxHeight, 0) || 無限大;
var minWidth = Math.max(options.minWidth, 0) || 0;
var minHeight = Math.max(options.minHeight, 0) || 0;

最大幅 < 無限大 && 最大高さ < 無限大) {
 （最大高さ * アスペクト比 > 最大幅）の場合 {
    最大高さ = 最大幅 / アスペクト比;
  } それ以外 {
    最大幅 = 最大高さ * アスペクト比;
  }
} そうでなければ（最大幅<無限大）{
  最大高さ = 最大幅 / アスペクト比;
} そうでなければ（最大高さ<無限大）{
  最大幅 = 最大高さ * アスペクト比;
}

最小幅 > 0 && 最小高さ > 0 の場合 {
 最小高さ * アスペクト比 > 最小幅の場合 {
    minHeight = minWidth / アスペクト比;
  } それ以外 {
    最小幅 = 最小高さ * アスペクト比;
  }
} それ以外の場合 (minWidth > 0) {
  minHeight = minWidth / アスペクト比;
} そうでなければ (minHeight > 0) {
  最小幅 = 最小高さ * アスペクト比;
}

幅 = Math.floor(Math.min(Math.max(幅, 最小幅), 最大幅));
高さ = Math.floor(Math.min(Math.max(高さ, minHeight), maxHeight));

// ...
// デフォルトの塗りつぶし色 (#000) を上書きします
var fillStyle = '透明';
コンテキストの塗りつぶしスタイル = 塗りつぶしスタイル;