Ausführliche Erklärung, wie man JS und Canvas zum Stoppen und Abspielen von GIF-Animationen verwendet

In diesem Artikel wird hauptsächlich die Verwendung von JS und Canvas zum Implementieren des Stop-and-Play-Codes von GIF-Animationen vorgestellt. Er ist von großem praktischem Wert.

HTML5-Canvas kann Bildinformationen lesen und zeichne das aktuelle Bild. Dadurch können viele Spezialeffekte wie Bildmosaik, Unschärfe, Farbwertfilterung usw. realisiert werden. Wir müssen hier nicht so kompliziert sein, wir müssen nur unser Bild lesen und es neu zeichnen.

HTML-Code:

<img id="testImg" src="xxx.gif" width="224" height="126">
<p><input type="button" id="testBtn" value="停止"></p>

JS-Code:

if ('getContext' in document.createElement('canvas')) {
 HTMLImageElement.prototype.play = function() {
  if (this.storeCanvas) {
   // 移除存储的canvas
   this.storeCanvas.parentElement.removeChild(this.storeCanvas);
   this.storeCanvas = null;
   // 透明度还原
   image.style.opacity = '';
  }
  if (this.storeUrl) {
   this.src = this.storeUrl; 
  }
 };
 HTMLImageElement.prototype.stop = function() {
  var canvas = document.createElement('canvas');
  // 尺寸
  var width = this.width, height = this.height;
  if (width && height) {
   // 存储之前的地址
   if (!this.storeUrl) {
    this.storeUrl = this.src;
   }
   // canvas大小
   canvas.width = width;
   canvas.height = height;
   // 绘制图片帧（第一帧）
   canvas.getContext('2d').drawImage(this, 0, 0, width, height);
   // 重置当前图片
   try {
    this.src = canvas.toDataURL("image/gif");
   } catch(e) {
    // 跨域
    this.removeAttribute('src');
    // 载入canvas元素
    canvas.style.position = 'absolute';
    // 前面插入图片
    this.parentElement.insertBefore(canvas, this);
    // 隐藏原图
    this.style.opacity = '0';
    // 存储canvas
    this.storeCanvas = canvas;
   }
  }
 };
}
 
var image = document.getElementById("testImg"), 
 button = document.getElementById("testBtn");
 
if (image && button) {
 button.onclick = function() {
  if (this.value == '停止') {
   image.stop();
   this.value = '播放';
  } else {
   image.play();
   this.value = '停止';
  }
 };
}

Der obige Code wurde nicht im Detail getestet und mögliche Erfahrungsprobleme (IE-Flashing) wurden nicht speziell behandelt (Veranschaulichung des Wirkungsprinzips) Wenn Sie es tatsächlich verwenden möchten, müssen Sie es selbst verfeinern, um es perfekt zu machen.

Unzulänglichkeit:

1. IE7/IE8 unterstützt kein Canvas.

2. Du kannst nur das GIF stoppen, nicht aber die echte Pause. Da es sich bei den von Canvas erhaltenen GIF-Bildinformationen um die Informationen des ersten Frames handelt, scheint es, dass die nachfolgenden nicht abgerufen werden können. Um eine Pause statt eines Stopps zu erreichen, ist weitere Forschung erforderlich. Wenn Sie eine Methode haben, können Sie diese gerne mit uns teilen.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man JS und Canvas zum Stoppen und Abspielen von GIF-Animationen verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!