Twitterから直接画像を参照するTwitterアプリケーションを開発しています。アニメーションGIFの再生を防ぐにはどうすればよいですか?
Firefoxでは、ページの最後でwindow.stop()
を使用しても機能しません。
より良いJavaScriptハックはありますか?これはすべてのブラウザで機能することが望ましい
これはクロスブラウザーソリューションではありませんが、Firefoxおよびopera(ie8:-/にはない)で機能しました。 from here
[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);
function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}
function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(e) { // cross-domain -- mimic original with all its tag attributes
for (var j = 0, a; a = i.attributes[j]; j++)
c.setAttribute(a.name, a.value);
i.parentNode.replaceChild(c, i);
}
}
@Karussellの答えに触発されて、Giffferを書きました。こちらをご覧ください https://github.com/krasimir/gifffer
Gifの上に停止/再生コントロールが自動的に追加されます。
Karussellの答えを改善するために、このバージョンはクロスブラウザである必要があり、不正なファイル終了(たとえば、自動画像読み込みページ)を含むすべての画像をフリーズし、元の画像の機能と競合しません。まるで動いているかのように右クリックされるオリジナル。
アニメーションを検出するように設定しますが、それは単にそれらをフリーズするよりもはるかに集中的です。
function createElement(type, callback) {
var element = document.createElement(type);
callback(element);
return element;
}
function freezeGif(img) {
var width = img.width,
height = img.height,
canvas = createElement('canvas', function(clone) {
clone.width = width;
clone.height = height;
}),
attr,
i = 0;
var freeze = function() {
canvas.getContext('2d').drawImage(img, 0, 0, width, height);
for (i = 0; i < img.attributes.length; i++) {
attr = img.attributes[i];
if (attr.name !== '"') { // test for invalid attributes
canvas.setAttribute(attr.name, attr.value);
}
}
canvas.style.position = 'absolute';
img.parentNode.insertBefore(canvas, img);
img.style.opacity = 0;
};
if (img.complete) {
freeze();
} else {
img.addEventListener('load', freeze, true);
}
}
function freezeAllGifs() {
return new Array().slice.apply(document.images).map(freezeGif);
}
freezeAllGifs();
これはちょっとしたハックですが、gifをiframeにロードし、イメージがロードされたらiframe内から(それ自体で)window.stop()
を呼び出してみてください。これにより、ページの残りの部分が停止しなくなります。