How to send base64 encoded image string into JSON object in javascript? - javascript

I wanted to convert a image file into JSON object in javascript.
So I have converted image into a string using base64 encoding.
How to convert this string to JSON object?

Simple, set value to an keyObj.
var base64String = 'data:image/png;base64....'
var imgObj = {
url: base64String
}
<img src=''+ imgObj.url +''/>

I would create a new Image() and set the src to the image. Then onload of the image, draw it to a canvas (which can be in memory, doesn't need to be in the DOM), and from there use toDataURL(). See this page for more details: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Related

Extracting and altering base64 image data in javascript

I want to alter the image data of a base64 image.
Altering is in this case encrypting the image data but it can be replace by toUpperCase() for simplicity's sake.
I get the image data with this code snippet :
let originalImage = myBase64Image
let imageData = originalImage.replace(/^data:image\/[a-z]+;base64,/, "");
imageData = imageData.toUpperCase()
Altering the imageData does not result in the changing of the original image data.
I was wondering if there way to bring imageData back to a full base64 image that I can use in an html element for example.
Thanks in advance.

Blob's DataUri vs Base64 string DataUri

As you know & stated in w3 it is possible to create a url for a Blob object in javascript by using Blob's createObjectUrl. On the other hand, if we have a data as a Base64 encoded string we can present it as a Url with the format "data[MIMEType];base64,[data>]".
Let's suppose that I have a base64 encoded string that was generated from an image that is very popular on these days :) "The red dot" image in wikipedia.
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
I'm 100% sure that if I create a URL conforming the Data URI Scheme as stated above, then, I'll be able to put a link element and download it from the browser: please see the code example below:
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = "data:image/png;base64," + reddotB64;
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);
This works prettywell and displays the image in a new tab. On the other hand I'll try to create the link by using Blob as follow:
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotBlob = new Blob([atob(reddotB64)], { type: 'image/png' });
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = URL.createObjectURL(reddotBlob);
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);
This code is decoding base64 encoded string variable reddotB64 via atob function. And then, creating a Blob object and continues with URL.createObjectURL function. In that case, since I've decoded reddotB64 from base64 to binary and created a Blob of type image/png and then create object url from that I expect it to work but it's not working.
Do you have a clue why it's not working? Or am I missing anything on the standards? Or doing something wrong in Javascript?
Here is the answer. Looks like it is an encoding issue. In order to convert/decode Base64 string to binary(UInt8Array/byte) using atob is not enough. After using atob it is required to use UTF-16 character code: and we achieve this by using charCodeAt function for every character in the decoded string. As a result we get UTF-16 encoded binary string which is definately working. Just create a Blob and then call URL.createObjectURL.

Angular: Convert base64 string to Byte Array in IE

I am trying to convert a base64 string to byte array and open it as a pdf file in IE. The only problem is atob is not supported in IE, so trying to use Buffer like this:
let b64Data = myBase64Url.split(',', 2)[1];
var byteArray = new Buffer(b64Data ,'base64').toString('binary');
var blob = new Blob([byteArray], {type: 'application/pdf'});
window.navigator.msSaveOrOpenBlob(blob);
I am getting a popup successfully to open the file
But the file is corrupted
What am i doing wrong ? Is there a better way to convert base64 to byte array in IE ?
In order for the base64 to be properly decoded, it must be only the base64 data, i.e. no mimetype information preceding it.
You will also need to remove .toString('binary') so that you're passing a buffer instead of a string.

convert an image server side to CanvasPixelArray

edit
so it looks like i have to somehow convert an image to
https://developer.mozilla.org/en/DOM/CanvasPixelArray
serverside
my current attempts have been to *
Pass a base64 encoded image from the server ... then converting it to binary with atob()
but then i get stuck trying to draw this onto a canvas without having to do something like
var i = new Image();
i.onload = function(){.....}
i.src = "base64 string"
So an even more general statement
I am trying to bypass creating a Image object by any means to display a new image
If your goal is to avoid the use of javascript and to simply embed the image in your page, you can simply do
<img src="data:image/png;base64,UhhIaminbase64...">
If your base64 is obtained dynamically in ajax, then the way to use the decoding library is to create an Image object with the code you made.
An alternate solution would be to send directly the RGB values in a binary array (base64 encoded if you use json) and to iterate client-side on this array in order to change your canvas' imageData. That seems easy enough but somewhat inefficient as you wouldn't have the compression of PNG or JPEG.
With html5 you can do so:
<script>
window.onload = function()
{
var img = new Image();
img.src = "data:image/png;base64,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";
document.body.appendChild(img);
};
</script>
Here is a working example: http://jsfiddle.net/4ZaUu/3/

convert base64 string to image with javascript

Am developing an application with Titanium. I need to convert base64 string which i would be getting from JSON to an image.
Your help would be greatly appreciated.
You can just create an img element and change its src with the required data:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />
For Titanium, you use the built in conversion utility Titanium.Utils.base64decode:
var imageFromBase64 = Titanium.UI.createImageView({
image : Titanium.Utils.base64decode("iVBORw0KGgoAAAANS..."),
});
This converts a base64 string to a blob, which can be used in an ImageView.

Categories