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..."

Answer 1

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

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

Answer 2

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.