Send base64/byte array of Gif Animation from server and display it on canvas

Magick.NET is an object-oriented C# interface to ImageMagick. Use this forum to discuss, make suggestions about, or report bugs concerning Magick.NET
Post Reply
rafael105
Posts: 3
Joined: 2017-07-16T12:13:24-07:00
Authentication code: 1151

Send base64/byte array of Gif Animation from server and display it on canvas

Post by rafael105 »

I built an interface that calls a web API in asp.net (i use c# and javascript/ajax to implement that).

The client side call to the controller, the controller needs to create animation gif and send it back to the client side (HTML page) by a string of base64 or byte array, when the client side gets the base64 he should display it into a canvas.

Now the problem is that the canvas display only the first frame of the animation gif like a static image.

I don't want to save the image on the disc just to display it on the client side canvas.

*Note that when I save the image from server side on my disc its save it as gif and display all frames together like I wish, something wrong when I transfer it to client side, maybe somthing with encode/decode the gif animated ?

*I use ImageMagick to create the animated gif.

Here is my client side code:

Code: Select all

 <!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>

and here is the server code:

Code: Select all

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;             
          }
     }
}
Any ideas? Please help. :?

Regards, Jr.Rafa
User avatar
dlemstra
Posts: 1570
Joined: 2013-05-04T15:28:54-07:00
Authentication code: 6789
Contact:

Re: Send base64/byte array of Gif Animation from server and display it on canvas

Post by dlemstra »

Are you really adding the snakeware1.gif file and is that really a gif file? You might need to do this:

Code: Select all

string data = collection.ToBase64(MagickFormat.Gif);
.NET + ImageMagick = Magick.NET https://github.com/dlemstra/Magick.NET, @MagickNET, Donate
rafael105
Posts: 3
Joined: 2017-07-16T12:13:24-07:00
Authentication code: 1151

Re: Send base64/byte array of Gif Animation from server and display it on canvas

Post by rafael105 »

Ty man:)

The problem was in the CANVAS element and the javascript... the base64 that was from the server (from magic.net) was ok !

Now its work after i changed the canvas to <img> element :D
Post Reply