Base64 image not opening up when converted from Image URL

Question

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?

Answer 1

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)

Answer 2

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.