JS+canvas operates gif animation

This time I bring you JS canvasOperation gif animation, what are the precautions for operating gif animation with JS canvas, the following is a practical case, let’s come together take a look.

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

HTML code:

<img  src="/static/imghwm/default1.png" data-src="xxx.gif" class="lazy" id="testImg"    style="max-width:90%"  style="max-width:90%" alt="JS+canvas operates gif animation" >
<p><inputtype></inputtype></p>

JS code:

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

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

insufficient:

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.                                                            

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Combining HTML tags with DOM nodes

js prohibits browser back events

The above is the detailed content of JS+canvas operates gif animation. For more information, please follow other related articles on the PHP Chinese website!