Сжатие изображения перед его загрузкой с использованием сжатия изображений браузера JS - PullRequest
Новая
       86

Сжатие изображения перед его загрузкой с использованием сжатия изображений браузера JS

0 голосов
/ 30 апреля 2020

Я получил демо, работающее на Сжатие изображений в браузере для сжатия изображений перед его загрузкой. Однако я хочу поместить compressed image link в <input type="text" id="preview-after-compress" />, чтобы я мог отправить ссылку на новое сжатое изображение в форму.

HTML: 

<div>
    <label for="web-worker">
        Compress in web-worker <span id="web-worker-progress"></span>
        <input id="web-worker" type="file" accept="image/*" onchange="compressImage(event, true);">
    </label>
    <input type="text" id="preview-after-compress" />
    <p id="web-worker-log"></p>
</div>
<table>
    <tr>
        <td>input preview</td>
        <td>output preview</td>
    </tr>
    <tr>
        <td><img id="preview" /></td>
        <td><img id="preview-after-compress" /></td>
    </tr>
</table>

JS: 

async function compressImage (event, useWebWorker) {
    var file = event.target.files[0]
    var logDom, progressDom
    if (useWebWorker) {
      logDom = document.querySelector('#web-worker-log')
      progressDom = document.querySelector('#web-worker-progress')
    } else {
      logDom = document.querySelector('#main-thread-log')
      progressDom = document.querySelector('#main-thread-progress')
    }
    document.getElementById('preview').src = URL.createObjectURL(file)

    logDom.innerHTML = 'Source image size:' + (file.size / 1024 / 1024).toFixed(2) + 'mb'
    console.log('input', file)
    console.log('ExifOrientation', await imageCompression.getExifOrientation(file))

    var options = {
      maxSizeMB: 1,
      maxWidthOrHeight: 1024,
      /*maxSizeMB: parseFloat(document.querySelector('#maxSizeMB').value),
      maxWidthOrHeight: parseFloat(document.querySelector('#maxWidthOrHeight').value),*/
      useWebWorker: useWebWorker,
      onProgress: onProgress
    }
    const output = await imageCompression(file, options)
    logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
    console.log('output', output)
    const downloadLink = URL.createObjectURL(output)
    logDom.value += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
    document.getElementById('preview-after-compress').src = downloadLink

    // await uploadToServer(output)

    function onProgress (p) {
      progressDom.value = '(' + p + '%' + ')'
    }
  }
    // what does the code below do?
  function uploadToServer (file) {
    var formData = new FormData()
    formData.append('image', file)
    return fetch('http://localhost/image-upload-api', {
      method: 'POST',
      body: formData
    })
  }

Демонстрация: https://jsfiddle.net/e2rt80bj/1/

...