Detailed explanation of how to use JS and canvas to stop and play gif animations-JS Tutorial-php.cn

Detailed explanation of how to use JS and canvas to stop and play gif animations

巴扎黑

Release： 2017-09-02 14:12:05

Original

2062 people have browsed it

This article mainly introduces the use of JS and canvas to implement the stop and playback code of gif animation. It is of great practical value. Friends in need can refer to it

HTML5 canvas can read image information and draw the current picture. Therefore, many special effects such as picture mosaic, blur, color value filtering, etc. can be realized. We don’t need to be so complicated here, we just need to read our picture and redraw it.

##HTML code:

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

Copy after login

JS code:

if (&#39;getContext&#39; in document.createElement(&#39;canvas&#39;)) {
 HTMLImageElement.prototype.play = function() {
  if (this.storeCanvas) {
   // 移除存储的canvas
   this.storeCanvas.parentElement.removeChild(this.storeCanvas);
   this.storeCanvas = null;
   // 透明度还原
   image.style.opacity = &#39;&#39;;
  }
  if (this.storeUrl) {
   this.src = this.storeUrl; 
  }
 };
 HTMLImageElement.prototype.stop = function() {
  var canvas = document.createElement(&#39;canvas&#39;);
  // 尺寸
  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(&#39;2d&#39;).drawImage(this, 0, 0, width, height);
   // 重置当前图片
   try {
    this.src = canvas.toDataURL("image/gif");
   } catch(e) {
    // 跨域
    this.removeAttribute(&#39;src&#39;);
    // 载入canvas元素
    canvas.style.position = &#39;absolute&#39;;
    // 前面插入图片
    this.parentElement.insertBefore(canvas, this);
    // 隐藏原图
    this.style.opacity = &#39;0&#39;;
    // 存储canvas
    this.storeCanvas = canvas;
   }
  }
 };
}
 
var image = document.getElementById("testImg"), 
 button = document.getElementById("testBtn");
 
if (image && button) {
 button.onclick = function() {
  if (this.value == &#39;停止&#39;) {
   image.stop();
   this.value = &#39;播放&#39;;
  } else {
   image.play();
   this.value = &#39;停止&#39;;
  }
 };
}

Copy after login

The above code has not been tested in detail, and possible experience problems (IE flashing) have not been specifically dealt with (indicating the impact principle). If you want to actually use it, you need to fine-tune it yourself. Perfect.

Shortcomings:

1. IE9+ support. IE7/IE8 does not support canvas.

2. You can only stop the gif, but you cannot pause it in the real sense. Because the gif image information obtained by canvas is the information of the first frame, it seems that the subsequent ones cannot be obtained. To achieve pause instead of stop, further research is needed. If you have a method, you are very welcome to share it.

The above is the detailed content of Detailed explanation of how to use JS and canvas to stop and play gif animations. For more information, please follow other related articles on the PHP Chinese website!