last day (14 days later) » 

6:04 AM
2
A: JS: how can I base64 encode a local file without XMLHttpRequest?

guest271314You can use <img> element, <canvas> element .toDataURL() to create data URL of local image file without using XMLHttpRequest() var file = "file.jpg"; var img = new Image; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); img.onload = function() { canvas.width = ...

 
Actually I think that the flag is also needed for canvas workaround, browsers that do prevent file:// xhr will taint the canvas if an image from this protocol has been drawn on it. Also, remember that this workaround won't give an exact representation of the file, it will be first decoded to raw bitmap, then re-encoded to whatever you set as parameter of toDataURL(). Oh and you always forget to set the canvas width and height in your recent examples, it would be a good habit to include them IMO.
 
@Kaiido See updated post.
 
You only fixed my last (and minor point) ;-) You do realize that your example will actually convert a jpg image into a png one ? So a note about it not being a direct encoding but rather a full conversion seems important. And It won't even work as a workaround to the actual problem without setting the flag, this should be made clear too.
 
@Kaiido Included setting of type at .toDataURL(). Missed that portion at Question and initial Answer. "And It won't even work as a workaround to the actual problem without setting the flag, this should be made clear too." Believe this is presently clear to OP, as error was returned without flag being set?
 
I'm sorry, I might not be clear enough, because it's even worth now : The process will be decode the jpg image to raw pixels, (actually grabbing the jpeg artifacts as plain pixels), and reencode it as a new jpg (adding more artifacts).
 
6:04 AM
@Kaiido Updated to image/jpg
 
which isn't valid, thus will default to image/png
 
Perhaps not gathering what you mean? Should be set to image/jpeg? With expectation that result will not be exact duplicate of original image?
 
So I don't know if for OP it will be clear, but at least for me, as a reader, it sounds like your answer says

> If you've got a cross-origin issue while gathering an image through xhr to get a dataURI version of it, you can use the canvas.

That is not true since the crossorigin issue will still apply (canvas will be tainted and no export method will be available)
So I would make the flag point more obvious and remove the "alternatively" you can... This is mandatory.
Then, your canvas example indeed is an alternative (I would say workaround) to the xhr+FileReader solution, but it doesn't do the same.
 
The data URI of <canvas> will be available at chrome, chromium using .toDataURL() at file: protocol
 
So a full note about it is needed. Something like :
> A way to get a dataURI version of an image without the use of xhr would be to use the canvas element. But note that it won't return a dataURI version of the file, but instead a dataURI version of the raw pixels once decode. This means that your image will be completely converted, and may grow in size, and even have different artifacts than the original one.
are you trying it from Desktop on a windows machine?
 
6:15 AM
No. Have tried and achieved the same several occasions at *nix at an html page loaded from local filesystem at file: protocol
"But note that it won't return a dataURI version of the file, but instead a dataURI version of the raw pixels once decode. This means that your image will be completely converted, and may grow in size, and even have different artifacts than the original one." Perhaps beyond scope of actual Question? Have you considered asking a canonical Question/Answer as to this?
 
I don't think so, the question states "I'm trying to base64 encode a local file.". You're not encoding the file.
And at least on mac Os, this will taint the canvas. And I'm pretty sure that on Windows, out of the Desktop folder, it will also taint it. Don't know about unix systems but it seems strange they do allow it there
 
data URI is returned at both chromium and firefox using same javascript which appears at Answer
""I'm trying to base64 encode a local file.". You're not encoding the file." ? Not following? Are you saying that both canvas.toDataURL() and FileReader.readAsDataURL() do not return data URI of image encoded as base64?
 
@guest271314 Mine returns "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.". Are you sure you don't have the flag set ? And then can you try the xhr version ?
@guest271314 No it won't, just make the test, you'll see that both dataURIs are different.
 
Have achieved this on many occasions in the past. Though, will try again, now.
 
2
A: canvas2d toDataURL() different output on different browser

KaiidoUse a FileReader and its method readAsDataURL(). For external files, you can still use it thank to XMLHttpRequest Object and its xhr.responseType = "blob" property, while limited by cross-origin requests. I didn't tried on every browser but this should be more precise than canvas. Image drawn...

 
6:25 AM
Not certain what you mean by "No it won't"?
 
canvas.toDataURL won't return the data URI of the image (at least not the exact one of the file)
 
The image appears the same here. XMLHttpRequest() version returned expected result as well
 
it will first decode it, at this stage it's still your file, then it will paint it to the canvas (now it's just raw pixels) and finally it will reencode it (it has nothing to do with your original file anymore)
check the dataURI strings... They're compeltely different
and even if you do the canvas operation from two different browsers, you'll have different outputs, while FileReader will always give you the same output, since it encode the file directly, it doesn't decode it.
 
Yes, the data URIs are different. Though, again, that fact is beyond scope perhaps beyond scope of original Question? The data URI's are indeed different, though visual difference, if any, is imperceptible to human eye. Are you suggesting removing canvas.toDataURL() optional approach from Answer, due to different data URI being returned than from FileReader?
 
not necessarly removing it, but make it less dominant and definetly add a note (even a small one like I wrote to you)
and yes if the dataURI are different it's because the pixels are not the same anymore either (even if you can't tell with your eyes, you can check this by looping through their imageData)
And can you also perform the xhr fom file protocol ?
 
6:35 AM
Feel free to edit Answer to include details which you have noted are important to take notice of.
Yes, xhr from file protocol. When you tried at chrome, did you close chrome, chromium before re-launching with flags set? Or open new browser instance with flag set while previous session still runnning?
 
No but I didn't set the flags, that's the point. Flags are needed, even for the canvas workaround. Currently you say that it's optional, whereas it's mandatory ! For both ways of encoding the image.
 
"No but I didn't set the flags, that's the point." You need to close existing chrome sessions then re-launch for flags to have effect. Unless you specifically set a new user data directory other than running instance of chrome. "Currently you say that it's optional" Where? No. Did not say it was optional; if you are referring to using XMLHttpRequest at file: protocol
Do you mean that --allow-file-access-from-files flag need to be set to use canvas.toDataURL()?
 
I DIDN'T SET THE FLAGS ! And won't.
You, try to unset it, then try your canvas solution. You'll see that the canvas will be tainted, and that you'll be unable to call toDataURL.

And for the where : "*...you could alternatively...*" .
It's not an alternative, the canvas solution also needs these flags. So it makes it less usefull as an answer to the actual question.
**But** you've got the correct answer which is
> "*launch with --allow-file-access-from-files flag set to allow request of resource from local filesystem*"
@guest271314 Yes, yes that's what I mean !!!!
 
"you could alternatively" is referencing the two possible approaches available when flag is set. Without making reference to quality differences between the different approaches. But if Answer is confusing as to this, will edit
 
6:51 AM
Yes but no, here it sounds really more like you could achieve the canvas one wihout the flag which is not true either.
 
See updated post
 

last day (14 days later) »