Add a costume from url with Javascript

Advanced Topics Advanced Help with Snap!
1

Hello,
I'm trying to load costumes from a url to the current sprite using only Javascript.
I found another forum post that does something similar using Snap blocks (not allowed to post links), but I would like to potentially do it completely detached from Snap, i.e. from a userscript. I've been digging around and can't find exactly what I'm looking for.
Also, on a related note, does anyone know where the API docs have moved? API.md on github doesn't exist anymore, and a quick google search only reveals snap.berkeley.edu/static/API, which doesn't have anything related to the actual editor or the contents of api.js.
Thanks!

2

Oh, wait. I'm stupid ignore the second part about API.md. Just found out where it moved to :man_facepalming:

3

You don't need javascript to load a costume from url. Turn on extension blocks from the gear menu, then use this block

1000295281
1000295281939×108 17.4 KB

And if you want to set the costume name, and add the costume to the sprite's costumes, you just need the pixels library (to set the name), and the rest of this script.

1000295282
10002952821524×570 116 KB

4

Hello, yeah I've seen and used this block, but I'm looking for a js-only method that could be used in any Snap project without needing any extra blocks. is there a way to call cst_load from javascript somehow?

5

Why would you use javascipt? The "primitive" block is just a block that holds pre-approved javascript functions, which the block can be ran (and saved) in any project without javascript enabled. If you want to use only javascript, the user would need to enable javascript extensions before it gets called.

6

My intention was to greate a utility userscript for myself (+ anyone who might want it) that streamlines button sprite creation with a little editor menu that generates a svg that can then be added automatically as a costume to the current sprite. making it as a Snap library or something is my plan B, and the primitive block would be helpful there. Just wondering if there was a way to do it from a userscript first :slight_smile:

7

Oh, ok. That does change things a bit. As for calling the function in javascript, it's not very possible with the way the function is written. Here is the function in the source code

It uses the current Process (I'm assuming it's what snap uses to run scripts), which I'm not sure how to get. Instead, take the code and adapt it to be used as it's own function, like this.

let costume = {
    img: new Image(),
    cst: null,
};
costume.img.onload = function () {
    let canvas = newCanvas(new Point(this.width, this.height));
    canvas.getContext('2d').drawImage(this, 0, 0);
    costume.cst = new Costume(canvas);
};
costume.img.src = './Costumes/alonzo.png';

Then to get the current sprite, it's very simple

let ide = world.childThatIsA(IDE_Morph);
let currentSprite = ide.currentSprite;

And adding a costume is also very simple

currentSprite.costumes.add(costume.cst);

All combined, it would be

let costume = {
    img: new Image(),
    cst: null,
};
costume.img.onload = function () {
    let ide = world.childThatIsA(IDE_Morph);
    let currentSprite = ide.currentSprite;

    let canvas = newCanvas(new Point(this.width, this.height));
    canvas.getContext('2d').drawImage(this, 0, 0);
    costume.cst = new Costume(canvas);
    costume.cst.name = 'costume name';

    currentSprite.costumes.add(costume.cst);
};
costume.img.src = './Costumes/alonzo.png';
8

This is exactly what I needed, works great.
Thanks for helping out!