Resize Image

resizer.js

function resize(imageDataUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.addEventListener('error', reject)
    img.addEventListener('load', () => {
      try {
        canvas.width = img.width
        canvas.height = img.height
        context.drawImage(img, 0, 0)
        const imageData = context!.getImageData(0, 0, img.width, img.height)
        canvas.toBlob(resolve, 'image/jpeg', 0.9)
      } catch (err) {
        reject(err)
      }
    })
  })
  
  img.src = imageDataUrl
}


document.querySelector('.my-file-input').addEventListener('change', event => {
  const reader = new FileReader()
  reader.addEventListener('load', async e => {
    const resizedBlob = await resize(e.target.result)
    // DO WHATEVER YOU NEED TO DO WITH THE BLOG TO SUBMIT THE FORM
  })
  
  reader.readAsDataURL(event.files[0]);
})