fengyuanchen / compressorjs を使用して画像を圧縮してからnhn / tui.image-editorでキャンバスエディターを読み込む

背景:

サイズの大きな画像をtui editor で読み込むとCPUスペックの低いモバイル端末でFilterの適用パフォーマンスが致命的に悪かったため、editor読み込み前に画像を圧縮する必要が生じた。

 

環境:

compressorjs@1.0.7

tui.image-editor@3.11.0

 

onFileChange(e) {

  const file = e.target.files[0]

  if(!file) {

   return

  }

  new Compressor(file, {

    quality: 0.3,

    success(result) {

      let objectUrl = window.URL.createObjectURL(result)

      initTuiEditor(objectUrl)

    }

  })

}

 

function initTuiEditor(objectUrl) {

  let editor = new TuiImageEditor('#editorWrapper')

  editor.loadImageFromURL(objectUrl)

}

 

ref:

github.com

github.com