10

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.

Max Zhuravlev
  • 324
  • 3
  • 13
milushov
  • 710
  • 11
  • 28

2 Answers2

5

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

Chris Thornton
  • 15,620
  • 5
  • 37
  • 62
  • thanks for response, btw it's works on gmail - http://joxi.ru/XqYiUdg5CbBfA-DXlPw – milushov Feb 18 '13 at 22:09
  • 1
    > "emulate file pasting with CF_HDROP, CF_FileName" do you have idea how to do it? – milushov Feb 18 '13 at 22:17
  • "very seldomly used" is an understatement - it seems it doesn't exist at all: https://learn.microsoft.com/en-us/windows/win32/dataxchg/standard-clipboard-formats – AndreKR Oct 16 '19 at 13:45
0

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.

Rovak
  • 778
  • 1
  • 6
  • 13
  • thanks, but this feature works on gmail - http://joxi.ru/XqYiUdg5CbBfA-DXlPw :) but I can't understand their uglifying code base.. – milushov Feb 18 '13 at 22:12
  • I can't use drag drop event, i need exactly clipboard :( – milushov Feb 18 '13 at 22:13
  • 2
    It seems Gmail is using the Source URL instead of the Image clipboard data, if you don't mind that the image is hosted elsewhere then you could go that route -http://i.imgur.com/4fHp2xB.jpg – Rovak Feb 18 '13 at 22:57
  • 4
    hmm.. but how to get this source url from event.clipboardData object? – milushov Feb 19 '13 at 10:00