JS+canvas exploite une animation gif

Cette fois je vais vous apporter JS+canvas pour faire fonctionner des animations gif, quelles sont les précautions pour faire fonctionner des animations gif avec JS+canvas, voici des cas pratiques, 1 Levez-vous et jetez un œil.

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

Code HTML :

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

Code JS :

if('getContext'indocument.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() {
  varcanvas = document.createElement('canvas');
  // 尺寸
  varwidth =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;
   }
  }
 };
}
  
varimage = 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 les éventuels problèmes d'expérience (scintillement de l'IE) n'ont pas été spécifiquement traités (le principe d'impact est affiché). Si vous souhaitez réellement l'utiliser, vous devez le peaufiner vous-même.

Inconvénients :

1. Prise en charge d'IE9+. IE7/IE8 ne prend pas en charge le canevas.

2. Vous ne pouvez arrêter que le gif, 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.                                        

Je pense que vous maîtrisez la méthode de lecture de cet article. Pour plus de passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Combiner des balises HTML avec des nœuds DOM

js interdit les événements de retour du navigateur

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!