Snippets

Aidan Harding HTML5 Image Resizing in an Aura Component

Created by Aidan Harding
save : function(component, file) {
    const fileReader = new FileReader();
    const helper = this;

    fileReader.onload = $A.getCallback(function() {

        const img = document.createElement('img');
        const canvas = document.createElement('canvas');
        img.src = fileReader.result;
        img.onload = $A.getCallback(function () {
            canvas.width = img.width/2;
            canvas.height = img.height/2;

            canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);

            let fileContents = canvas.toDataURL('image/jpeg', 0.9);
            const base64Mark = 'base64,';
            const dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

            fileContents = fileContents.substring(dataStart);

            helper.upload(component, file, fileContents);

        });
    });
    fileReader.readAsDataURL(file);
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.