Displaying gif URL as image only

Question

Is there any simple way to display GIF as image only on webpage. Let say user has posted

http://netdna.webdesignerdepot.com/uploads/2013/04/Dvdp3.gif

which is a gif but when displaying I don't want to show gif. Actually, I am using summernote.

Answer 1

If your browser supports <canvas>, you can take advantage of it to display frozen gifs:

<canvas id="imageCanvas"></canvas>

Javascript:

var canvas = document.getElementById("imageCanvas"),
    image = new Image();

image.src = "/path/to/image.gif";
image.addEventListener("load", function() {
    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
    canvas.getContext("2d").drawImage(image, 0, 0);
});

Live demo (activate the Javascript panel, and disable the CSS panel).

Tested in IE9-11, Chrome and Firefox.

Update

Using the technique above, there's something more you can do if you actually want an <img> element and not a <canvas>:

var preloadImage = new Image(),
    finalImage = new Image(),
    canvas = document.createElement("canvas");

preloadImage.src = "/path/to/image.gif";
preloadImage.addEventListener("load", function() {
    canvas.width = preloadImage.naturalWidth;
    canvas.height = preloadImage.naturalHeight;
    canvas.getContext("2d").drawImage(image, 0, 0);

    finalImage.src = canvas.toDataURL("image/png");
    // Append to the DOM. Choose the parent you want.
    document.body.appendChild(finalImage);
});

Notice that the canvas isn't even appended to the document, just like preloadImage.

This works only if:

• the image's source satisfies the same origin policy or
• the server allows cross-origin requests, and the image is loaded with crossOrigin enabled (preloadImage.crossOrigin = "anonymous";).

Otherwise the canvas is "tainted" and toDataURL throws a SecurityError.

Answer 2

GIF is a very different format as JPEG format. When a user is posting it, you will have to convert it to the desired format risking to lose transparency and such. Displaying a gif as another format as is is not possible.

Or just let is display as a GIF, why do you want to change that?

Answer 3

Not sure I understand the question.

Do you want to display this gif with an url that does not end with .gif ?

If yes, you can tweak the mimetype in the headers.

The browser don't care about the extension displayed in URL. It just care about MIME type wich describe what to do with the data. A html page sent with 'text/plain' MIME type will display the sourcecode like if it was a txt, it won't be interpreted as html. You can rename you gif as .jpeg and send it to browser with 'image/gif' mimetype.

If you are using apache you can change MIME type with .htaccess. Add a text file called .htaccess in the folder of your image with this text in it :

AddType image/gif yourfilename

This should work if your host allow it.

Answer 4

To stop all gifs from animating you can use the freezeAllGifs() function posted by Makaze in this StackOverflow answer. You should execute it after the page loaded, which should stop all animated gifs.

It might not be a great solution, but the only other one I can think of is a server-side script that would download all posted gifs, conver tthem and then replace the original links with urls of the converted files on the local server.

Answer 5

You can use this inefficient solution, but it works!

setTimeout(function() {
    setInterval(function() {
        $('#img1').attr('src',$('#img1').attr('src'))
    },1)
}, 2000)

DEMO: http://jsfiddle.net/MEaWP/2/