Missing text and lines in a gif generated from svg

[caiofior]

Missing text and lines in a gif generated from svg.

This is a sample page address.

https://45.76.94.162/pre-gea/test.html

If you click on "Esporta immagine" button the generated image is without line and text.

Thanks in advance

[1j01]

"Forbidden You don't have permission to access /pre-gea/test.html on this server."

If you want control over how the SVG is rendered you could draw the SVG to a canvas yourself, and then pass the canvas to gif.js, and you could append the canvas to the DOM for debugging; the point being that it's not necessarily a gif.js problem; as far as gif.js is concerned it's just an image (or, if it's an <svg> in the DOM, Firefox might let you do the canvas ctx.drawImage that gif.js does internally but other browsers wouldn't, and I you might run into other problems like with loading) Are you using an <img>. and did you wait for onload?

[caiofior]

Thank you for you patience, moreover i do not know why you could not see the sample page I made.

The svg is genereted with d3.js library. Below the graph there is a button to export the data with the following code:

function esportaGif() {

   function saveData (data,fileName) {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";

   var url = window.URL.createObjectURL(data);
   a.href = url;
   a.download = fileName;
   a.click();
   window.URL.revokeObjectURL(url);

   };

  var html = $("#grafico")[0];
  var serialized = new XMLSerializer().serializeToString(html);
  var svg = new Blob([serialized], {type: "image/svg+xml"});
  var url = URL.createObjectURL(svg);

  var gif = new GIF({
      workers: 20,
      quality: 1,
      repeat:0,
      debug: true,
      background: '#fff',
      transparent: 'rgba(0,0,0,0)',
      dither: "FloydSteinberg-serpentine",
      workerScript : "../ext/bower_components/gif.js/dist/gif.worker.js"
   });

   var img = new Image();
   img.onload = function(){
      gif.addFrame(img);
      gif.on('finished',function(blob) {
         saveData(blob, "grafico.gif");
      });
      gif.render();
    };
    img.src = url;

}

[caiofior]

I tried to put all on jsfiddle.net

https://jsfiddle.net/7v5ya9p0/2/

[1j01]

Ah, it was because I tried to switch to http:// because HTTPS gave a security warning; if I instead say "proceed anyways" I can see the page.

Looks like you're running into the same problem as #82 and https://github.com/jnordberg/gif.js/issues/64, and which there's a pull request trying to fix https://github.com/jnordberg/gif.js/pull/77 (described as hacky)

If you're just trying to export a static image, you probably don't need to use gif.js; you can use canvas.toDataURL or canvas.toBlob (which there's a polyfill for) to export a PNG. (You can specify that you want image/gif, but it'll default to image/png if it's not supported in a given browser.) Unless you really need a GIF for some reason, PNG generally compresses better than GIFs ("in almost every case (5% to 25% in typical cases)") And of course, the SVG itself can compress much better than PNG or GIF, so if saving SVG works for you, that's even simpler, just save the svg blob - just mentioning in case you didn't consider it. 🙂

[caiofior]

Thank you, I have no experience with canvas and it's the time to learning something about them.