Browser Image Compression Sample

※ サンプルなので送信ボタンを押しても送信されないです。

<form name="fileinfo">
  <div>
      <label>ユーザー名</label>
      <input type="text" name="user">
  </div>
  <div>
      <label>メールアドレス</label>
      <input type="email" name="email">
  </div>
  <div>
    <label for="web-worker">
      <input id="web-worker" type="file" name="image" accept="image/*" onchange="compressImage(event);">
      <span id="web-worker-progress"></span>
    </label>
    <p id="web-worker-result"></p>
  </div>
  <button type="submit">送信</button>
</form>

function compressImage(event) {
  const file = event.target.files[0]
  const result = document.getElementById('web-worker-result')
  const progressDom = document.getElementById('web-worker-progress')

  result.innerHTML = (file.size / 1024 / 1024).toFixed(2) + 'MB => '

  const options = {
    maxSizeMB: 1,
    maxWidthOrHeight: 1000,
    onProgress: onProgress,
  }
  imageCompression(file, options)
    .then(function(output) {
      const img = URL.createObjectURL(output)
      result.innerHTML += (output.size / 1024 / 1024).toFixed(2) + 'MB<br>'
      result.innerHTML += `
        <a href="${img}" target="_blank">
          <img src="${img}" width="200" alt="">
        </a>`
      return setSubmitEvent(output)
    })
    .catch(function(error) {
      console.error(error.message)
    })

  function onProgress(percent) {
    progressDom.innerHTML = `(${percent}%)`
    if (percent === 100) {
      progressDom.innerHTML = ''
    }
  }
}

function setSubmitEvent(file) {
  const form = document.forms.namedItem('fileinfo')
  const formData = new FormData(form)
  const url = '/post/foo/bar/'

  formData.append('image', file, file.name)

  form.addEventListener('submit', function(e) {
    axios
      .post(url, formData, {
          headers: {
            'content-type': 'multipart/form-data'
          }
        }
      )
      .then((res) => console.log(res))
      e.preventDefault()
  })
}

元記事を表示する