Is there a way to create an image blob from a bytearray converted with atob()?

Question

THE PROBLEM I'm trying to learn how bytearrays and bufferarrays work, so I'm just playing with the language a bit. I'm wondering why I can't seem to convert image data into bytearrays from a blob, and then create a new blob using that bytearray that is identical to the original, then eventually make a new image identical to the original from the new blob. In my mind I should be able to create a new object with all of the original image data.

THE ATTEMPT

// window dimensions
var [cWidth, cHeight] = [window.innerWidth, window.innerHeight] // defaults, changes when image is loaded
const body = document.getElementsByTagName('body')[0]
const canvas = document.getElementById('theCanvas')

canvas.width = cWidth
canvas.height = cHeight
canvas.style.width = cWidth
canvas.style.height = cHeight
// canvas.style.backgroundColor = '#777'
const ctx = canvas.getContext('2d')

window.onload = function(){
    let newimage
    // create a bitmap of the image i created in gimp
    const getImageData = (async function(){
        const img = await fetch('./myimage.jpg')
        const blob = await img.blob()
        console.log(blob)   // example of a real image blob

        const ascii = await btoa(blob)  // convert image blob to ascii
        let testing = new Blob([new Uint8Array(ascii).buffer], {type: 'image/jpeg'}) // try to convert bytearray back into image blob
        console.log(testing)    // makes a blob, but of length 0 with no data
        
        const imagebitmap = await createImageBitmap(blob)

        ctx.drawImage(imagebitmap, 0, 0)
        cWidth = imagebitmap.width      // canvas size and resolution to match the image being loaded..
        cHeight = imagebitmap.height    // canvas size and resolution to match the image being loaded..
        const new_image_data = ctx.getImageData(0, 0, imagebitmap.width, imagebitmap.height)
        return new_image_data
    })().then( res => {
        newimage = res 
        console.log(newimage) // imageData created from the imported image drawn to the canvas
    })
}

THE DESCRIPTION OF WHAT I'VE TRIED AND WHY I got the idea of using new Uint8Array.buffer from this https://stackoverflow.com/questions/38399544/is-there-any-way-to-convert-byte-array-to-blob-object-on-client-side-in-node-js#new-answer and tried with and without the ".buffer" since those are the only two answer on there and no other replies from the community. Neither throws an error, just creates an empty blob instead of one filled with the bytestring data as I'm expecting it to.

I'm trying to play with this because I'm trying to learn how type arrays work so I can learn to optimize code down the road - just learning, nothing practical yet. According to the docs at https://w3c.github.io/FileAPI/#reading-a-file it should be possible, from what I gather.

Is there a way to create an image blob from a bytearray converted with atob()?

0 Answers0