Javascript 从服务器端发送Gif动画的base64/字节数组，并将其显示在客户端的画布上_Javascript_C#_Jquery_Ajax_Canvas

Javascript 从服务器端发送Gif动画的base64/字节数组，并将其显示在客户端的画布上

javascript c# jquery ajax canvas

Javascript 从服务器端发送Gif动画的base64/字节数组，并将其显示在客户端的画布上,javascript,c#,jquery,ajax,canvas,Javascript,C#,Jquery,Ajax,Canvas,我在asp.net中构建了一个调用web API的接口（我使用c#和javascript/ajax来实现）客户端调用控制器时，控制器需要创建动画gif并通过base64字符串或字节数组将其发送回客户端，当客户端获得base64时，他应将其显示在画布中现在的问题是画布只显示动画gif的第一帧，就像静态图像一样我已经在互联网上读了很多书，发现：但这对我没有帮助，因为我不想将图像保存在光盘上，只是为了在客户端显示它 *请注意，当我将服务器端的图像保存到光盘上时，它会将图像另存为gif并按照我

我在asp.net中构建了一个调用web API的接口（我使用c#和javascript/ajax来实现）

客户端调用控制器时，控制器需要创建动画gif并通过base64字符串或字节数组将其发送回客户端，当客户端获得base64时，他应将其显示在画布中

现在的问题是画布只显示动画gif的第一帧，就像静态图像一样

我已经在互联网上读了很多书，发现：

但这对我没有帮助，因为我不想将图像保存在光盘上，只是为了在客户端显示它

*请注意，当我将服务器端的图像保存到光盘上时，它会将图像另存为gif并按照我的意愿将所有帧显示在一起，当我将图像传输到客户端时，出现了一些问题

*我使用ImageMagick创建动画gif

这是我的客户端代码：

  <!DOCTYPE html>
  <html> 
      <head>
          <title></title>
          <meta charset="utf-8" />
          <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
      </head> 
      <body style="padding-top: 20px;">
          <div class="col-md-10 col-md-offset-1">
              <div class="well">
                  <!---->
                  <canvas id="canvasImage" width="564" height="120">          
                      <p>We apologize, your browser does not support canvas at this time!</p>     
                  </canvas>             
                  <!---->
              </div>
          </div>
      <script src="Scripts/jquery-1.10.2.min.js"></script>
      <script src="Scripts/bootstrap.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function () {
              $.ajax({
                  url: '/api/EngineProccess',
                  method: 'GET',
                  success: function (data) {
                      var imageObj = new Image();
                      var canvas = document.getElementById("canvasImage");                     
                      var context = canvas.getContext('2d');                     
                      var image = new Image();                     
                      image.onload = function () {                         
                          context.drawImage(image, 0, 0);                     
                      };
                      console.log(data);
                      image.src = "data:image/gif;base64," + data;                 
                  },
                  error: function (jqXHR) {                     
                      $('#divErrorText').text(jqXHR.responseText);                     
                      $('#divError').show('fade');
                  }
              });
          });
      </script>
  </body>
</html>

有什么想法吗？请帮忙

编辑：几天后我发现了问题，我使用magicimage（magic.net）创建了gif动画，base64还可以，但问题出在canvas元素，canvas没有显示我想要的动画，所以我将元素canvas更改为常规图像元素（），并更改了图像动态的src

问候,， Jr.Rafa

在画布上加载播放gif的示例。很抱歉，答案限制在30K以下，代码和注释会被削减到适合的程度。如果需要，请提出意见。请参阅代码段底部的基本用法

/*
代码是根据中规定的规范创建的https://www.w3.org/Graphics/GIF/spec-gif89a.txt
该文件说明了使用条件
“图形交换格式（c）是
CompuServe Incorporated.GIF（sm）是的服务标记属性
CompuServe公司。”
https://en.wikipedia.org/wiki/GIF#Unisys_and_LZW_patent_enforcement 最后一段
其他来源
https://en.wikipedia.org/wiki/GIF
https://www.w3.org/Graphics/GIF/spec-gif87.txt
*/
var GIF=函数（）{
var-timerID；
var-st；
var interraceoffsets=[0,4,2,1]；//用于反隔行扫描。
var interlaceSteps=[8,8,4,2]；
var InterracedBufsize=未定义；
var deinterlaceBuf=未定义；
var pixelBufSize=未定义；
var pixelBuf=未定义；
常量GIF_文件={
GCExt:0xF9，
注释：0xFE，
APPExt:0xFF，
未知：0x01，
图像：0x2C，
EOF:59，
分机：0x21，
};      
var Stream=函数（数据）{//简单缓冲流
this.data=新Uint8ClampedArray（数据）；
此值为0.pos；
var len=this.data.length；
this.getString=函数（计数）{
var s=“”；
而（计数--）{
s++=String.fromCharCode（this.data[this.pos++]）；
}
返回s；
};
this.readSubBlocks=函数（）{
变量大小、计数、数据；
数据=”；
做{
count=size=this.data[this.pos++]；
而（计数--）{
data+=String.fromCharCode（this.data[this.pos++]）；
}
}while（size！==0&&this.posclear=1>3]&（1您将需要编写或使用gif解码器，解码gif将为您提供每一帧和计时等。解码相对简单，最复杂的位是压缩像素数据的lwz解码器。数据以标题存储。您只需在本文档中提供可能的重复[即使问题是关于fabricjs库的，答案也是通用的]请注意，这只适用于相同的域或启用CORS的GIF。很抱歉，我无法添加更多答案，但答案大小有限。
public class EngineProccessController : ApiController     
{         
     // GET api/EngineProccess
     public String Get()         
     {             
          using (MagickImageCollection collection = new MagickImageCollection())             
          {                 
               // Add first image and set the animation delay to 100ms                 
               collection.Add("Snakeware1.gif");              
               collection[0].AnimationDelay = 100;                  

               // Add second image, set the animation delay to 100ms and flip the image                 
               collection.Add("Snakeware2.gif");             
               collection[1].AnimationDelay = 100;                 
               collection[1].Flip();                  

               // Optionally reduce colors                 
               QuantizeSettings settings = new QuantizeSettings();                 
               settings.Colors = 256;                 
               collection.Quantize(settings);

               // Optionally optimize the images (images should have the same size).                 
               collection.Optimize();

               // Save gif                 
               //collection.Write("D://Test01//Test01//Animated.gif");                
               string data = collection.ToBase64();                 
               return data;             
          }
     }
}