Extracting and altering base64 image data in javascript - 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.

Related

How to display returned data ASCII as image?

Does anyone have an idea of what this is?
base64 / binary / hex??
This is an image data, but I don't know how to display it.
OMIT THIS STRING as it's manually added: data:image/png; base64,
Try using JavaScript's image object. Like this:
let base64Img = new Image();
base64Img.src = "data:image/png;base64,*rest of data here*...";
And then you can put that image object into your HTML something like this:
document.querySelector(*yourCSSselector*).appendChild(base64Img);
Edit: You said it wasn't working so I looked into it a bit more.
I encoded this image: https://i.picsum.photos/id/78/536/354.jpg
Using the tool at https://www.base64-image.de/
I then made a codepen to display that image in a simple HTML file: https://codepen.io/seancowan-dev/pen/jOEdJvy?editors=1011
new Image(); should work if you are passing it a correctly formatted Data URI. So lets take a look at what is in your URI to make sure it is properly formatted base64.
Can you screenshot a console.log(base64Img) so we can see what's in there?

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.

How to send base64 encoded image string into JSON object in 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

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/

Store images in Javascript object

I am not sure if this is possible, but I want to store an image in a JavaScript variable or an object and when the page loads, I want to make those images appear where desired.
I want to know if some images are converted to binary form. Can they be converted back to images with JavaScript?
It appears that the OP is requesting how to do data islands in JavaScript, specifically for images. None of the answers previously given provide such a method, so here you go.
Basically, you encode the image as a base64 string and then set that as the source of a DOM element. Setting the source of an Image object to a url is not equivalent, since it requires an addition HTTP connection.
var data = 'data:image/gif;base64,'+
'R0lGODlhAAEwAMQAAJ2M5Me98GRK1DoYyYBr3PHv++Pe99XO81Y50auc6PBkZEgpzbmt7HJa2I57'+
// snip //
'fS3CqU7XGYgE+GqHvrLJ8Tr6qXmqiwAF9CffgnMNqmWHAWNBwwGsKpKsrmJqltOOV69nuYxSkqpo'+
'Tata18rWtrr1rTIIAQA7';
var icon_elem = document.getElementById("icon_here");
icon_elem.src = data;
The above code and a full example can be found here: http://www.kawa.net/works/js/data-scheme/base64-e.html
You can simply use
var img = new Image();
img.src = "http://yourimage.jpg";
to create a DOM image.
A DOM image is an object in memory that contains the image binary form, so there's no need to convert it back to an image since it's already one.
See, this is a simple matter. But the method to approach this problem is not the way you are trying right now.
What you think will work:
We'll store the image (its binary data) in a js variable, and then slap it on the page any time.
How it will work much more easily:
you just have to create a DOM image on the page, and set its source. The browser will fetch the image from the server automatically.
Examples:
ex-1:
var img_src = "http://someserver/yourimage.png";
var node = document.getElementById('the-node-in-which-i-want-my-image');
node.innerHTML = "<img src='"+img_src+"' alt='my image'>";
ex-2: (using jquery) - this is essentially the same as above, only much easier to write:
var img_src = "http://someserver/yourimage.png";
$('#the-node-in-which-i-want-my-image')
.html("<img src='"+img_src+"' alt='my image'>");
Now, there's one more thing: the browser starts fetching the image after this code runs, so the image actually appears a little after you insert it into the DOM.
To prevent this, you can pre-fetch the images using:
var prefetch = new Image();
prefetch.src = "http://someserver/yourimage.png";
Cheers!

Categories