Is there a way to get images from the clipboard?

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?

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.)

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).


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

blob = clipboardItem.getType("image/png")

More info

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

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



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.

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.

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.

you could just show me in a picture

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) {
  .then( clipData => {
    item = clipData.find( v => v.types.includes("image/png") );
    if( !item)
         error( "No image data")
     .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;
     .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

thank you so much

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.

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