Load image as costume from URL

probably something like:

var audio = new Audio(src);
return new Sound(audio, soundName);

I'm pretty sure external resource loading is asynchronous so the above code would be like

(assigning calling this function to a Snap! variable)

let sound = null;
const audio = new Audio(src);
audio.onload = () => {
  sound = new Sound(audio, costumeName);
};
return () => sound;

[scratchblocks]
wait until (call (sound) :: control)
report (call (sound) :: control) :: control
[/scratchblocks]

Jens, I tried you're javascript function to load the weather icon from an api. Everything works fine until saving the project where I get the following error.

Thank you for the effort.

Can you post a link to the project?

Here it is: Snap! Build Your Own Blocks

Thanks - What URL is causing it to give the error on saving?

At the bottom the reporter

I'm thinking that this error may be significat and causing corruption of the image data and therefore the costume

image

image

buienradar script pic (1)

Thank you, this looks serious. In the mean time I should download the icons manually or use no icons at all. I stick with the latter.

You have to add img.crossOrigin = 'anonymous'; before img.onload = () => cst = new Costume(img);. and make sure the server sends CORS headers.

How do you do that?

Thanks - I can save the project now but have to stamp the icon costume and switch back to the Turtle costume.

I think like so...

Note: You need to request access to use cors-anywhere

How do you do that?

https://cors-anywhere.herokuapp.com/corsdemo

By stamping and then using the pen trails - I can finally get the pixels of it without getting an error

image

Use the block in my Custom Blocks project. It sets the cors attribute to anonymous and turns the image into a canvas, so more images are able to be loaded and invoking pixels of will work.

Thanks - another solution to the problem :+1:

Why do the internal functions for network requests use pushContext then?