Failed to load resource: the server responded with a status of 404 ()

[matharotheelf]

I am trying to 'square' a file using WASM-ImageMagick however I am facing an error I can't figure out. I seems that I can't load some files and my requests to the api are causing 404s.

Here is the Javascript in the 'index.html' I am running:

  <script type='module'>

    //import the library to talk to imagemagick
    import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js';

    // various html elements
    let rotatedImage = document.getElementById('rotatedImage');

    // Fetch the image to rotate, and call image magick
    let DoMagickCall = async function () {
      let fetchedSourceImage = await fetch("artwork.jpg");
      let arrayBuffer = await fetchedSourceImage.arrayBuffer();
      let sourceBytes = new Uint8Array(arrayBuffer);

      // calling image magick with one source image, and command to rotate & resize image
      const files = [{ 'name': 'srcFile.jpg', 'content': sourceBytes }];
      const command = [
        "convert", 
        "srcFile.jpg", 
        "-bordercolor", 
        "transparent", 
        "-border", 
        "1", 
        "-set", 
        'option:distort:viewport "%[fx:max(w,h)]x%[fx:max(w,h)]-%[fx:max((h-w)/2,0)]-%[fx:max((w-h)/2,0)]"',
        "-virtual-pixel",
        "edge",
        "-distort",
        "SRT",
        "0",
        "the_square.jpg"];
      let processedFiles = await Magick.Call(files, command);

      // response can be multiple files (example split)
      // here we know we just have one
      let firstOutputImage = processedFiles[0]
      rotatedImage.src = URL.createObjectURL(firstOutputImage['blob'])
      console.log("created image " + firstOutputImage['name'])
    };
    DoMagickCall();
  </script>

I get the following errors:

I would appreciate any help!