Buffer from img element.js

// Need to run chrome in insecure mode
// - for flatpack: flatpak run com.google.Chrome --args --disable-web-security --allow-running-insecure-content --user-data-dir="/temp/chrome/123"

(() => {
    const img = document.querySelector('img');
    if (img.complete) {
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        document.body.appendChild(canvas)
        
        const ctx = canvas.getContext('2d');
        
        ctx.drawImage(img, 0, 0);
    
        const imgData = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight)
    
        const buffer = imgData.data.buffer; 
        console.log(img);
        console.log(buffer);
    }
    
})()


// Or blob async

(async () => {
    const img = document.querySelector('img');
    if (img.complete) {
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        document.body.appendChild(canvas)
        
        const ctx = canvas.getContext('2d');
        
        ctx.drawImage(img, 0, 0);

        const blob = await new Promise((resolve) => {
            canvas.toBlob(
                resolve,
                "image/jpeg",
                0.95
            );    
        });
        console.log(blob);   
    }
})()