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.
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.
Share Improve this question edited Feb 18, 2013 at 13:29 Max Zhuravlev 3343 silver badges13 bronze badges asked Feb 18, 2013 at 10:39 milushovmilushov 72112 silver badges28 bronze badges2 Answers
Reset to default 5The 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..
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.