gif URL을 이미지로만 표시하기

Question

GIF을 웹 페이지에만 이미지로 표시하는 간단한 방법이 있습니까? 가정 해 봅시다 사용자는 GIF가

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

을 기록했지만 표시 할 때 나는 지프를 보여주고 싶어하지 않습니다. 사실, 나는 summernote를 사용하고있다.

Answer 1

경우 냉동 GIF를 표시하는 데 활용할 수 있습니다

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

자바 스크립트 :

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을 (Javascript 패널을 활성화하고 CSS 패널을 비활성화하십시오).

Chrome 및 Firefox의 IE9-11에서 테스트되었습니다.

이

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); 
}); 

공지 캔버스는도 추가되지 않습니다 것을 : 당신이 실제로 <img> 요소가 아닌 <canvas>을 원하는 경우 위의 기술을 사용하여

업데이트

, 당신이 할 수있는 뭔가 더있다 문서에, preloadImage처럼.

• 이미지의 원본이 동일한 원본 정책 또는
• 서버가 출처 간 요청을 허용하고, 이미지를 사용할 수 crossOrigin (preloadImage.crossOrigin = "anonymous";)와로드를 만족 :

  이는 경우에만 작동합니다.

그렇지 않으면 캔버스가 "오염되어"toDataURL이 SecurityError입니다.

Answer 2

GIF는 JPEG 형식과 매우 다른 형식입니다. 사용자가 게시 할 때 투명성 등을 잃을 위험이있는 형식으로 변환해야합니다. GIF를 다른 형식으로 표시하는 것은 불가능합니다.

그냥 GIF로 표시하도록 하시겠습니까? 왜 변경 하시겠습니까?

Answer 3

잘 모르겠습니다.

.gif로 끝나지 않는 URL로이 gif를 표시 하시겠습니까?

그렇다면 헤더에서 MIME 유형을 조정할 수 있습니다.

브라우저는 URL에 표시되는 확장 프로그램을 신경 쓰지 않습니다. 단지 데이터로 무엇을 할 것인지를 설명하는 MIME 유형에 관심이 있습니다. 'text/plain'MIME 유형으로 전송 된 HTML 페이지는 txt 인 것처럼 html로 해석되지 않는 것처럼 소스 코드를 표시합니다. gif의 이름을 .jpeg로 바꾸고 'image/gif'mimetype을 사용하여 브라우저로 보낼 수 있습니다.

아파치를 사용하는 경우 .htaccess로 MIME 유형을 변경할 수 있습니다. 그것은이 텍스트의 .htaccess 이미지의 폴더에라는 텍스트 파일을 추가 : 호스트가 허용하는 경우

AddType image/gif yourfilename

이 작동합니다.

Answer 4

모든 gif의 애니메이션을 중지하려면 the freezeAllGifs() function posted by Makaze in this StackOverflow answer을 사용할 수 있습니다. 페이지가로드 된 후에 실행해야합니다. 그러면 애니메이션이 적용된 모든 gif가 중지됩니다.

위대한 해결책은 아니지만 내가 생각할 수있는 유일한 다른 서버는 게시 된 모든 gif를 다운로드하고 변환 한 다음 원래 링크를 변환 된 파일의 URL로 대체하는 서버 측 스크립트입니다. 로컬 서버.

Answer 5

이 비효율적 인 솔루션을 사용할 수 있지만 작동합니다!

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

DEMO : 브라우저가 <canvas>을 지원 http://jsfiddle.net/MEaWP/2/