We Keep Coding

Base64 image not opening up when converted from Image URL

I am converting an image to Base64 from Image URL using canvas. The approach I am taking is similar to below 2 links but the converted Base64 string is not opening up the image when viewed in Chrome Tab.
Links
CONVERT Image url to Base64
(1st answer with 81 thumbs up).
https://jsfiddle.net/3qshvc54/
I tried consoling the img, canvas, ctx in fiddle and my code. The console output is the same. Please see below screenshots.
If I do it by fiddle the converted Base64 URL opens up fine in a new tab, but the one generated from my code does not display an image when opened up in a new tab.
I am using same Image URL in my code and Fiddle
Console screenshot when running from my code
Console screenshot when running from Fiddle
The Base64 generated from my code:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABDCAYAAAAlFqMKAAAApklEQVR4Xu3VsQ0AIAwEMbL/0tShQLrejHB6kzneKjB67AKCPIsQRJD/J2EhFmIh6ZAigwwyyKQCyCCTBuPKIIMMMqkAMsikwbgyyCCDTCqADDJpMK4MMsggkwogg0wajCuDDDLIpALIIJMG48oggwwyqQAyyKTBuDLIIINMKoAMMmkwrgwyyCCTCiCDTBqMK4MMMsikAsggkwbjyiCDDDKpADL/XBfFQABED54eAwAAAABJRU5ErkJggg==
I tried validating the same online it shows that the Base64 string is valid:
When I try to decode the same:
It seems that the result of decoding is a binary data (MIME type detected as “image/png”) and because of this the data from “Text” may be damaged during the output.
My code:
<div className='image-root'>
<img id={`imageBlock-${props.photoBoxID}`} className="multi-image-photo" src={props.imgUrl} alt="photo"></img>
</div>
getBase64Image = (img) => {
img.crossOrigin = 'Anonymous';
var canvas = document.createElement("CANVAS");
canvas.width = img.width;
canvas.height = img.height;
console.log('img', img);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
console.log('canvas', canvas);
console.log('ctx', ctx);
var dataURL = canvas.toDataURL();
console.log('dataURL', dataURL);
}
componentDidUpdate(prevProps, prevState){
if(this.props.isUploaded && (prevProps.isUploaded !== this.props.isUploaded)){
let imageRef = document.getElementById(`imageBlock-${this.props.photoBoxID}`);
imageRef.onload = this.getBase64Image(imageRef);
}
}
Can you suggest why the Base64 string generated is not opening up fine if converted from my code, though it opens up from Fiddle? Is it corrupted?

onload is an event you need function there and in that function you need to update src.
componentDidUpdate(prevProps, prevState){
if(this.props.isUploaded && (prevProps.isUploaded !== this.props.isUploaded)){
let imageRef = document.getElementById(`imageBlock-${this.props.photoBoxID}`);
imageRef.onload = () => {
delete imageRef.onload;
imageRef.src = this.getBase64Image(imageRef);
};
}
}
but better is to add base64 image to state and don't use getElementById directly in React applications.
EDIT:
for infinite loop I would create 2 images, if you need to render image on canvas you usually render outside of DOM:
componentDidUpdate(prevProps, prevState){
if(this.props.isUploaded && (prevProps.isUploaded !== this.props.isUploaded)){
let imageRef = document.getElementById(`imageBlock-${this.props.photoBoxID}`);
var srcImg = new Image();
srcImg.onload = () => {
imageRef.src = this.getBase64Image(srcImg);
};
srcImg.src = prevProps.imgUrl;
}
}
and remove the props from JSX template you will not need it.
And side note: if you have big image it's better to create object URL from blob, because there is limit of data that can be put into URL (for smaller images it should not matter):
function asObjectUrl(canvas) {
return new Promise(function(resolve) {
canvas.toBlob(function(blob) {
resolve(URL.createObjectURL(blob));
});
});
}
The object url need to be removed when not needed to not create memory leaks (use URL.revokeObjectURL)

change your img's src attribute adding src="data:image/jpeg;base64 tag with the encoded string like below:
<img id={`imageBlock-${props.photoBoxID}`} className="multi-image-photo" src="data:image/jpeg;base64, ${props.imgUrl}" alt="photo"></img>
This should work.
N.B.: Please check your imageString variable carefully, I might have used the wrong one, not sure.

How do I find the src value of an image uploaded using fileReader?

I'm building a program that allows the user to choose an image to upload. Once the user chooses one, it triggers the previewFile() function, which uses FileReader to display the image.
Now I'm building a function that will download the same image that the user uploaded (and add some style changes). First, I created a new image element, but now I'm stuck, since I can't figure out how to reference the src value of the original image. Once I do get the src value, I can finish adding the styles, then download the edited image.
Here's what I have so far - can anyone help me out?
HTML:
<input type="file" onchange="previewFile()">
<img src="" alt="Preview File...">
JavaScript:
function previewFile() {
const preview = document.querySelector('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
And the function I need help with:
function createAndDownload() {
const editedImage = document.createElement('img');
/*
Here's where I need help: I need to figure out how to get the image src
from the original image, and set it equal to editedImage.src
*/
//add styles
//download editedImage
}

You assigned it this way:
const preview = document.querySelector('img');
preview.src = reader.result;
So you do the same thing to read it back:
const preview = document.querySelector('img');
const something = preview.src;

How to detect dimensions of file using File API and Dropzone.js

Using Dropzone.js, I need to detect the dimesions of the image when added files and apply them to its parent .details div. The following code code works and return an alert with the added image width.
myDropzone.on("addedfile", function(file, xhr) {
var fr;
fr = new FileReader;
fr.onload = function() {
var img;
img = new Image;
img.onload = function() {
return alert(img.width);
};
return img.src = fr.result;
};
return fr.readAsDataURL(file);
});
The thing is that I have no idea how to assign the width to its parent .details element which set the preview width of the preview.
I try replacing the alert for this code but it doesn't do anything.
$(this).parent('.details').css('height',img.height);
I'm a bit lost in how to relate the value inside the onload function to applying it to its parent class.

With the latest version of dropzone you don't have to write this code yourself.
Simply read the file.width and file.height properties that are set on the file object when the thumbnail is generated.
The problem, why your CSS doesn't affect the element, is because you didn't specify the unit, px in this case. So your code can be:
myDropzone.on("thumbnail", function(file) {
$(this.element).parent('.details').css('height', file.height + 'px');
});

append string to image src using js

I've got a page where there is <img src="/images/product/whatever-image.jpg" alt="" />
I want it so that upon loading of the page, the string "?Action=thumbnail" is appended to src's value, making it src="/images/product/whatever-image.jpg?Action=thumbnail"
how do I achieve this using js?

window.addEventListener('load', function(){
/* assuming only one img element */
var image = document.getElementsByTagName('img')[0];
image.src += '?Action=thumbnail';
}, false);
Note, changing the source of the image will "re-fetch" the image from the server — even if the image is the same. This will be better done on the server-side.
Update after comment:
window.addEventListener('load', function(){
/* assuming only one div with class "divclassname" and img is first child */
var image = document.getElementsByClassName('divclassname')[0].firstChild;
image.src += '?Action=thumbnail';
}, false);

Use this:
window.onload = function() {
document.getElementById('myImage').src += "/Action=thumbnail";
};

Change image on click

I have a table and I would like to change an image in its <td> when I click it but it must be URL of image that I determine before.
That URL of image I type to the link of the page(for example by click on img)
index.html?type=dog
Then the script will read variables from link. I will create variable to the script.
type = httpGetVars["type"]
Now when I click on where is img of cat, the script should replace cat.png for dog.png and I tried it in this way.
<img src="cat.png" onClick="document.write("<img src=\""+ type + ".png\">);

<img id="foo" src="cat.png />
Give that <img> an id - foo for example than:
document.getElementById('foo').src = type +".png";
You simply change the existing <img> src to the new image.

You can define the img like the following:
<img src="some_image_url.extension" onclick="switchImage(this)" />​
and then on the switchImage function you can check the current image and change to a different image:
var switchImage = function(image) {
if(image.src == dogImage) {
image.src = catImage;
} else {
image.src = dogImage;
}
};​
I've made a Sample Fiddle so you can see it running.