How to remove data:image/png;base64 in base64 before uploading to api server through axios post in ReactJs

Question

Getting the base64 Output from this

My updated Code

  getCroppedImg(image, crop) {
        const canvas = document.createElement('canvas');
        const scaleX = image.naturalWidth / image.width;
        const scaleY = image.naturalHeight / image.height;
        canvas.width = crop.width;
        canvas.height = crop.height;
        const ctx = canvas.getContext('2d');
        ctx.imageSmoothingQuality = 'high';
        ctx.drawImage(
            image,
            crop.x * scaleX,
            crop.y * scaleY,
            crop.width * scaleX,
            crop.height * scaleY,
            0,
            0,
            crop.width,
            crop.height
        );
        return new Promise((resolve, reject) => {
            canvas.toBlob(blob => {
                resolve(canvas.toDataURL());
            }, 'image/jpeg');

        });


    }

How to remove this data:image/png;base64, in ReactJs Any help would be much appreciated, Thanks


src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAgAElE..."

why do you want to remove the mentioned metadata. Please refer to the following link how the image gets rendered by browser https://stackoverflow.com/questions/5242319/what-does-this-mean-image-pngbase64/15928978#:~:text=data%3Aimage%2Fpng%3Bbase64%20tells%20the%20browser%20that%20the,within%20the%20HTTP%20protocol%20even). — Venkatesh Chitluri, Apr 19 '21 at 14:37
The reason i want to remove is because the server is throwing the error response message - "Message":"The input is not a valid Base-64 string as it contains a non-base 64 character and ive tried it in postman without the header information, getting the success response "picture saved" — Arun Raj, Apr 19 '21 at 14:42

score 0 · Answer 1 · answered Apr 19 '21 at 14:21

0

you can use the following code to remove data:image/png;base64 section:

var base64 = string.split(',')[1];

answered Apr 19 '21 at 14:21

alisasani

2,808
1
7
15

score 0 · Answer 2 · answered Apr 19 '21 at 14:35

0

you may not want to remove that header information from you base64, without it, future clients may not be able to properly parse and then display your base64 strings...

It's actually important "header" type information, to inform a browser/client of the image mime type, encoding etc... Check out MDN for more details.

answered Apr 19 '21 at 14:35

rexfordkelly

1,623
10
15

The reason i want to remove is because the server is throwing the error response message - "Message":"The input is not a valid Base-64 string as it contains a non-base 64 character – Arun Raj Apr 19 '21 at 14:38
ive tried it in postman without the header information, getting the success response "picture saved" – Arun Raj Apr 19 '21 at 14:40
I see, in that case, you are most likely running into an encoding issue, check out the answer by Jim Mischel here, https://stackoverflow.com/questions/15114044/the-input-is-not-a-valid-base-64-string-as-it-contains-a-non-base-64-character – rexfordkelly Apr 19 '21 at 14:47
Its not working, any example code in react would be helpful – Arun Raj Apr 19 '21 at 14:59
Oh, you would need to address the encoding issues server side. – rexfordkelly Apr 19 '21 at 15:04

How to remove data:image/png;base64 in base64 before uploading to api server through axios post in ReactJs

2 Answers2