Compiler/enregistrer/exporter du HTML sous forme d'image PNG à l'aide de Jquery

Question

J'ai une configuration avec plusieurs variables que les utilisateurs peuvent modifier et qui ont un effet sur la représentation visuelle d'un élément. Tout ceci est contrôlé par jquery scripts. Ce serait cool s'il y avait un moyen d'enregistrer l'image résultante selon ce que le navigateur rend. Ce ne serait pas différent d'une capture d'écran du point de vue de l'utilisateur, bien que cela ne capturerait que la zone pertinente.

J'ai un plugin pour FF appelé Page Saver, et sa fonctionnalité correspond à peu près à ce que je recherche, mais avec jquery ou du javascript normal si possible.

Je demande plutôt des conseils, et une direction générale que vous me conseilleriez d'emprunter afin de poursuivre cette fonctionnalité. Je préférerais ne pas apprendre un autre langage pour faire cela, mais si je dois le faire...

Answer 1

Edit : Cette méthode ne fonctionne que dans les extensions Firefox.

Vous pouvez utiliser Canevas HTML5 , Firefox' [drawWindow](https://developer.mozilla.org/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()) et le toDataURL méthode. Par exemple :

var capture = function() {
  var root = document.documentElement;
  var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas');
  var context = canvas.getContext('2d');
  var selection = {
    top: 0,
    left: 0,
    width: root.scrollWidth,
    height: root.scrollHeight,
  };

  canvas.height = selection.height;
  canvas.width = selection.width;

  context.drawWindow(
    window,
    selection.left,
    selection.top,
    selection.width,
    selection.height,
    'rgb(255, 255, 255)'
  );

  return canvas.toDataURL('image/png', '');
};

Vous pouvez régler top , left , width y height pour ne capturer qu'une partie de la page web.

Le résultat est un données URI chaîne. Vous pouvez l'envoyer à votre serveur ou la dessiner sur un autre canevas :

  var canvas = document.getElementById('captured');
  var ctx = canvas.getContext('2d');
  var image = new Image();
  image.src = capture();

  // the image is not immediately usable
  $(image).load(function() { // jquery way
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
  });

Votre plugin utilise probablement cette méthode. Vous pouvez également vérifier son code source.

Editar : Pour l'envoyer à votre serveur avec JQuery, vous pouvez faire quelque chose comme ça :

$("#send-capture-button").click(function() {
  $.post("/url-to-send-image-to", {image_data: capture()})
});

Du côté du serveur, vous devrez décoder l'URL des données.

Answer 2

Il n'existe pas de fonctionnalité JS intégrée aux navigateurs qui vous permettrait de transformer une image en HTML, malheureusement. Il faut donc installer un plugin ou une extension de navigateur qui dispose d'une API JS à laquelle vous pouvez faire appel. Mais même dans ce cas, il faudrait évidemment que ce plugin soit installé sur le navigateur de cette personne.