I am trying to build a frontend with SvelteKit which queries a webserver using an HTTP get request for a file. I receive the file (which is ZIP format), unzip it, and extract an image from it. I am trying to then display the image on the frontend, but am struggling to get the displaying part part working. I am new to Svelte, JS and frontend development (coming from a scientific programming/Python background) so I am trying to hack my way through this. This is what I’ve tried so far:
<script>
...
async function download() {
...
// get image portion of the data
const image_data = await zip_data.file('view_img.jpg').async('blob');
image_url = URL.createObjectURL(image_data);
console.log('image url', image_url);
console.log(image_data)
const ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = image_url
}
</script>
...
<canvas bind:this={canvas} width=600 height=400></canvas>
VSCode is complaining that I cannot create the image object without any arguments (The error is showing up as: Expected 1 arguments, but got 0.js(2554)
) but all of the code samples that I see online show Image
being created with no arguments. The only difference I notice is that most of the code samples create images in the onMount()
function, but in my specific case, I am trying to load an image after processing some user input and running my HTTP GET query.
I would appreciate someone’s help in figuring out how to do this seemingly simple task of downloading an image and showing it on the frontend that I’m building.
TYVM!