Is there a way to get images from the clipboard?

Help with Snap!
1

so I've created a block that sends anything to the clipboard (here it is), and you can retrieve things from the clipboard, but you can't retreive imagase from the clipboard. is there a way to do that?

2

Not that I know of. But since pictures are first class, you could write a block that reports whatever's in the clipboard. (Text, too, preferably. For extra credit, if it's XML, parse it as a list or procedure or whatever.)

3

I have, but if an image is on the clipboard, it reports nothing. and the block is in the project (it's retrieve thing from clipboard).

4

With

navigator.clipboard.read(thing).then...

you can get "clipboardItem" and then convert to something useful

blob = clipboardItem.getType("image/png")
URL.createObjectURL(blob));

More info

5

I don't know how to do it. can you show me it in snap blocks?

6

To read image, Javascript function in your project must be, at least, modified from

navigator.clipboard.readText(thing).then

to

navigator.clipboard.read(thing).then

It was the easy part...
Next, there is a blob API (Javascript) to get the content of the image as byte, URL or B64 data to make something useful with image.
https://javascript.info/blob

Deciding which format to use and what to do with data in Snap (create costume, get List of pixel color, build Sprite ) is a core of your problem.

I have no example project.

7

Oh, no, I think it's clear that the block should be a reporter, and should report the picture as a costume. That's the most general thing, because the user can use our costume-related blocks to get the bitmap, make a new sprite, or whatever.

8

you could just show me in a picture

9

There is a Javascript function for your project ("retrieve thing from clipboard") to copy "image/png" from clipboard as a costume.
It's rough, ugly, triple asynchronous implementation of simplest case, hardcoded for PNG.
To be used for "switch costume".

var done = false
,thing = new Costume( newCanvas(new Point( 1, 1), true), "empty")
,item = null

const error = (function Error( txt){ done = true;throw txt;})

if( "clipboard" in navigator) {
  navigator.clipboard.read()
  .then( clipData => {
    item = clipData.find( v => v.types.includes("image/png") );
    if( !item)
         error( "No image data")
     item.getType("image/png")
     .then( blob => {
          var url = (window.URL || window.webkitURL).createObjectURL( blob);
          var img = new Image();
          img.onload = function () {
             canvas = newCanvas(new Point(img.width, img.height), true);
             canvas.getContext('2d').drawImage(img, 0, 0);
             thing = new Costume( canvas, "Clipboard")
             done = true;
          };
          img.src = url;
          return;
     })
     .catch(err => error("No PNG data: "+err));
 })
 .catch(err => error( "I can't retrieve thing from clipboard: "+err));
} 
else {alert("I can't retrieve thing from clipboard."); done = true}

return new List([ function(){return done}, function(){return thing}])

Example project

10

thank you so much

11

At first I thought maybe it was a new word I don't know, but it seems to be a typo. Can you please correct the title so it will say "images" instead? Tnx.

12

sorry, my spelling is horrible and I would be making so many mistakes without spell check. The title's fixed