image-compressor.jsでExif情報で画像を回転

画像アップロード時に画像を圧縮してくれるimage-compressor.js

デフォルトだと画像をアップロードしたときに縦向きの写真が横向きになるなど写真の向きがおかしくなるときがある。

オプションでcheckOrientation: falseを設定すれば写真の向きを正しくしてくれる(デフォルトはfalse)。

デモ1(checkOrientation: false)

デモ2(checkOrientation: true)

<div class="wrap">
  <div id="preview"></div>
    <form>
      <input id="test" type="file">
    </form>
  </div>
</div>
  $(function() {
    $('#test').change(function(e) {
      var file = e.target.files[0];
      new ImageCompressor(file, {
        quality: .6,
        checkOrientation: false,
        success(result) {
          var fileReader = new FileReader();
          fileReader.onloadend = function() {
            $('#preview').html('<img src="' + fileReader.result + '"/>');
          }
          fileReader.readAsDataURL(result);
        },
        error(e) {
          console.log(e.message);
        },
      });
    });
  });

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA