Explication détaillée de la façon d'utiliser JS et Canvas pour arrêter et lire des animations GIF

Cet article présente principalement l'utilisation de JS et de Canvas pour implémenter le code stop and play des animations gif. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer

Le canevas HTML5 peut lire les informations sur les images. et dessinez l’image actuelle. Par conséquent, de nombreux effets spéciaux d'image tels que la mosaïque d'image, le flou, le filtrage des valeurs de couleur, etc. peuvent être réalisés. Nous n’avons pas besoin d’être si compliqué ici, il nous suffit de lire notre image et de la redessiner.

Code HTML :

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

Code JS :

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 = '停止';
  }
 };
}

Le code ci-dessus n'a pas été testé en détail, et d'éventuels problèmes d'expérience (clignotement IE) n'ont pas été spécifiquement traités (illustration du principe d'impact) Si vous souhaitez réellement l'utiliser, vous devez le peaufiner vous-même pour le rendre parfait.

Inadéquation :

1. IE7/IE8 ne prend pas en charge le canevas.

2. Vous pouvez uniquement arrêter le gif, mais pas la vraie pause. Étant donné que les informations sur l'image GIF obtenues par Canvas sont les informations de la première image, il semble que les suivantes ne puissent pas être obtenues. Pour parvenir à une pause au lieu d'un arrêt, des recherches supplémentaires sont nécessaires. Si vous avez une méthode, n'hésitez pas à la partager.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!