Converting stage canvas into image

Help with Snap!
1

I have tried a couple of different methods when attempting to convert the stage canvas into an image.
One of them was:

stage.canvas.toDataURL("jpg");

My goal is to be able to manipulate Snap! from a webhook and have it potentially respond with an image of the stage.

2

let me tell you a little secret: If you switch to "dev mode" by holding down the shift key while clicking on the Snap! logo:

dev mode

you get an experimental block in the looks category that lets you create a snapshot of the stage and save it as a costume:

snapshot

Does that help?

3

Potentially. Will I need to make a new hidden / invisible sprite that switches to this costume and then use the above method?

4

no, why would you? Any sprite and also the stage can do this.

5

I need to send the image across the webhook, that's why.
I am using sockets in JavaScript to say for example:

  1. User requests circle to be drawn with param parameters from a website
  2. Circle is drawn on the canvas
  3. Image is sent back
6

yeah, sure. The screenshot costume gives you a canvas that'll let you do all of that.

7

OK, thanks. What about all of the junk generated? (It created screenshot, screenshot(1), screenshot(2)...)

8

The costumes are just a list. You can delete, replace, add items any time just using list blocks.

9

Ah I see. Here is what I have now, thanks.

WIP
WIP778×278 56.3 KB

How about script pics like this one?

10

not yet. :slight_smile:

11

Came across a strange issue that causes an infinite loop within the program...
The culprit:

Not sure why. Probably a bug within the implementation. I believe this has also occurred in the past when I attempted to use Run on a block that returned the result of a JS function call.

12

The source code:

13

Nevermind, no return statement.

14

OK
So, actually, there are ways that are built-in that allow taking pictures of scripts and stages and etc.
For anyone else who is wondering, I looked around through the source and found these 3 functions:
morph.scriptsPicture() returns a canvas element for the blocks in the sprite / stage with a transparent background
morph.fullImage() returns a canvas element for a group of blocks with a transparent background or of the sprite / stage
morph.fullImageClassic() seems to be the same as above except if used on the stage it will show everything, not just the background

As for how I got the morphs, sent ring morphs have an expression value (that when the ring is empty, is an array with 1 element, the ring itself)
And this refers to the current sprite. I just passed my [stage] to get the stage but there might be a property for it

15

To get the stage without the my block, use this.parentThatIsA(StageMorph) (my [stage] probably invokes that method).

16

Thanks. Are there any official/unofficial docs for these functions aside from reading source code and console output?

17

Not that I know of.