Can't use Base64 as source

[trainbolt]

It would be really handy to be able to use base64 as the image instead of a URL... do you know of a way to do this?

This looks amazing and I'd really love to be able to use it.

Thanks.

[mimimimichael]

I kinda got it to work. jimp (the underlying image-processing libarary) can handle different inputs. With the function from this gist you can transform the base64 url into a Uint8Array and grab the buffer from there.

const base64File = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...'
const readableFile = convertDataURIToBinary(base64Image).buffer;

<ProcessImage image={readableFile}/>

Unfortunately another script (browser-image-resize) is throwing an error but the image filters i used are applied correctly. Don't know if resizing will still work though.

Still, it would be nice to see this handled in a better way, since it's a quite common usecase. Image Upload -> Base64 -> do some transformation ... -> Send to server.

[nitin42]

Yup! This totally makes sense. I will look into this issue this week. Sorry, I've been busy lately with some other projects and didn't notice @trainbolt suggestion.

[nitin42]

Can you tell me exactly what sort of error occurs due to browser-image-resize ?

[nitin42]

Also, it would be nice if you could share an example of how you are using the base64 images with jimp.

[nitin42]

@alotov-agina I'd be open to a PR for this. I am busy with some other work. But I can help you with this work,

• You can use probe-image-size instead of browser-image-size to support base64.

Thanks!

[mrjosshi]

is there any solution available for this?

[nitin42]

You can use probe-image-size instead of browser-image-size to support base64.

[mrjosshi]

is it another dependency where i need to add this? could you please clear this in details or any example for this
TIA

[nitin42]

Sorry, I've been busy lately. So, the error is being caused by the dependency "browser-image-size". To make it work (base64), you need to replace that dependency with "prob-image-size". That's it!

[yueHan98]

Sorry, I've been busy lately. So, the error is being caused by the dependency "browser-image-size". To make it work (base64), you need to replace that dependency with "prob-image-size". That's it!

Hi, I tried this solution, but then probe-image-size is throwing a weird error: "TypeError: merge is not a function" when I do have deepmerge installed. Is there a solution for that? Thanks!

[yueHan98]

It seems that I've fixed the TypeError which is caused by the deepmerge package the probe-image-size package is relying on. However, now the componentDidMount function in main.js is throwing a "options.uri is a required argument" error and I'm wondering if you could give me a hint on how to fix that. Thanks in advance. :)