how to get animated gif image from browser clipboa

Question

I am testing the following code, and when I copy an animated gif and paste it to web page, I see image/png in the console - instead of image/gif as expected.

Why?

document.onpaste = function(event) {
  console.log(event.clipboardData.items[1]['type']); // 'image/png'
};

How can I match a gif image?

You can test it at this jsfiddle with this gif image for example.

Answer 1

The CF_GIF clipboard format is very seldomly used. Most app copy images to the clipboard only as CF_BITMAP, CF_ENHMETAFILE, or CF_DIB. Then when you paste, the data is converted to whatever format the target application perfers, such as PNG or Bitmap. So in your case, the GIF was likely copied to the clipboard as a Bitmap, then converted to PNG when pasting. All of the animation frames of your GIF were lost. In order to preserve, you need to do drag/drop or emulate file pasting with CF_HDROP, CF_FileName, etc..

Answer 2

When you copy a gif image by (i assume) right clicking the image and then "copy image" then you copy the current frame instead of the entire file. If you want to capture the entire file then i suggest to capture it in a drag drop event.