Can't use Base64 as source

Question

Can't use Base64 as source

trainbolt opened this issue 6 years ago · comments

trainbolt commented 6 years ago

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.

Michael · Answer 1 · Mon Feb 19 2018 23:13:53 GMT+0800 (China Standard Time)

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.

Nitin Tulswani · Answer 2 · Wed Feb 21 2018 02:30:07 GMT+0800 (China Standard Time)

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.

Nitin Tulswani · Answer 3 · Wed Feb 21 2018 02:33:22 GMT+0800 (China Standard Time)

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

Nitin Tulswani · Answer 4 · Wed Feb 21 2018 02:54:42 GMT+0800 (China Standard Time)

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

Nitin Tulswani · Answer 5 · Sun Mar 04 2018 01:01:36 GMT+0800 (China Standard Time)

@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!

Anil Joshi · Answer 6 · Wed Mar 28 2018 19:02:09 GMT+0800 (China Standard Time)

is there any solution available for this?

Nitin Tulswani · Answer 7 · Wed Mar 28 2018 19:29:12 GMT+0800 (China Standard Time)

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

Anil Joshi · Answer 8 · Thu Mar 29 2018 13:15:28 GMT+0800 (China Standard Time)

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

Nitin Tulswani · Answer 9 · Fri Mar 30 2018 04:09:06 GMT+0800 (China Standard Time)

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 · Answer 10 · Mon Sep 17 2018 20:20:07 GMT+0800 (China Standard Time)

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 · Answer 11 · Mon Sep 17 2018 21:08:46 GMT+0800 (China Standard Time)

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. :)