Html - how to get base64 image from canvas

Avishka
December 8, 2023
258 views
0 votes
2 Answers

I have created a function. That function can read the uploaded image and get the imageData from the canves.

But I couldn’t get base64 image from that imagedata

Here is what I did

function handleFileSelect(event) {
    const file = event.target.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {
            const base64Data = e.target.result.split('base64,')[1];

            const img = new Image();
            img.src = "data:image/png;base64," + base64Data;

            img.onload = function() {
                const canvas = document.getElementById('imageCanvas');
                const ctx = canvas.getContext('2d');
                let imageData;
                
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                 
                imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            };
        };

        reader.readAsDataURL(file);
    }
}

Answers

The getImageData() method of the canvas context provides the pixel data of the image, but not in base64 format. You need to use the toDataURL() method:

function handleFileSelect(event) {
    const file = event.target.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {
            const base64Data = e.target.result.split('base64,')[1];

            const img = new Image();
            img.src = "data:image/png;base64," + base64Data;

            img.onload = function() {
                const canvas = document.getElementById('imageCanvas');
                const ctx = canvas.getContext('2d');
                
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                
                ctx.drawImage(img, 0, 0); 
                
                const base64Image = canvas.toDataURL("image/png");

                // Use base64Image as needed
            };
        };

        reader.readAsDataURL(file);
    }
}

Does this help you?

function handleFileSelect(event) {
    const file = event.target.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function (e) {
            const base64Data = e.target.result.split('base64,')[1];

            const img = new Image();
            img.src = "data:image/png;base64," + base64Data;

            img.onload = function() {
            
                const canvas = document.getElementById('imageCanvas');
                const ctx = canvas.getContext('2d');
                                let imageData;
                
                canvas.width = img.naturalWidth;
                canvas.height = img.naturalHeight;
                
                
                imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const image_data_array = image_data.data; // <--changed here
                // Write the image data to the canvas // <--changed here
                ctx.putImageData(image_data, 0, 0); // <--changed here
            };
        };

        reader.readAsDataURL(file);
    }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to get base64 image from canvas

Answers