search

blueimp / JavaScript-Load-Image

Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.
https://blueimp.github.io/JavaScript-Load-Image/
MIT License
4.46k stars 923 forks source link

Error: TypeError: data.image.toBlob is not a function #114

Closed yourchoice closed 4 years ago

yourchoice commented 4 years ago

When I upload a file image, i get this error

Error: TypeError: data.image.toBlob is not a function

$('.wrapper').on('change', 'input[type=file]', function(e) {
loadImage(e.target.files[0], { meta: true })
  .then(function (data) {
    if (!data.imageHead) throw new Error('Could not parse image metadata')
    return new Promise(function (resolve) {
      data.image.toBlob(function (blob) {
        data.blob = blob
        resolve(data)
      }, 'image/jpeg')
    })
  })
  .then(function (data) {
    //here i try to get data.blob
  })
  .catch(function (err) {
    console.error(err)
  });
});
yourchoice commented 4 years ago

I see that there need to add in param { canvas: true } and working , so i think can be closed

yourchoice commented 4 years ago

Is there a way in then(function (data) { ... }) to convert data.blob in base64 ? I would like to prefill an hidden input with base64...

blueimp commented 4 years ago

Hi @yourchoice,

canvas data can be exported as base64 URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

I recommend you to bookmark https://developer.mozilla.org/, as it's a great documentation resource for JavaScript and has a good search function that will allow you to find answers to your question on your own.