Page 1 of 1

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

Posted: 2017-07-16T12:24:04-07:00
by rafael105
I built an interface that calls a web API in (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>
          <meta charset="utf-8" />
          <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
      <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>     
      <script src="Scripts/jquery-1.10.2.min.js"></script>
      <script src="Scripts/bootstrap.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function () {
                  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);                     
                      image.src = "data:image/gif;base64," + data;                 
                  error: function (jqXHR) {                     

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[0].AnimationDelay = 100;                  

               // Add second image, set the animation delay to 100ms and flip the image                 
               collection[1].AnimationDelay = 100;                 

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

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

               // Save gif                 
               string data = collection.ToBase64();                 
               return data;             
Any ideas? Please help. :?

Regards, Jr.Rafa

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

Posted: 2017-07-16T16:40:22-07:00
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);

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

Posted: 2017-07-18T14:30:28-07:00
by rafael105
Ty man:)

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

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