Скомпилируйте / сохраните / экспортируйте HTML как изображение PNG, используя Jquery - PullRequest
Новая
       23

Скомпилируйте / сохраните / экспортируйте HTML как изображение PNG, используя Jquery

7 голосов
/ 09 мая 2011

У меня есть набор с несколькими переменными, которые пользователи могут изменять, что влияет на визуальное представление элемента. Все это контролируется скриптами jquery. Было бы здорово, если бы был способ сохранить полученное изображение в соответствии с тем, что отображает браузер. Он не будет отличаться от снимка экрана с точки зрения пользователя, хотя будет захватывать только соответствующую область.

У меня есть плагин для FF, который называется Page Saver, и его функциональность в значительной степени то, что я ищу, но с jquery или обычным JavaScript, если это возможно.

Я больше прошу советов и общего руководства, в котором вы, ребята, посоветовали бы мне пойти, чтобы использовать такую ​​функциональность. Я бы предпочел не изучать другой язык, чтобы сделать это, но если я должен ...

Ответы [ 2 ]

14 голосов
/ 10 мая 2011

Редактировать: этот метод работает только в расширениях Firefox.

Вы можете использовать HTML5 canvas , Firefox ' drawWindow и метод toDataURL . Например: 

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', '');
};

Вы можете настроить top, left, width и height для захвата только части веб-страницы.

В результате получается строка URI данных. Вы можете отправить его на свой сервер или нарисовать на другом холсте: 

  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);
  });

Ваш плагин, вероятно, использует этот метод. Вы также можете проверить его исходный код.

Редактировать : Чтобы отправить его на ваш сервер с JQuery, вы можете сделать что-то вроде этого: 

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

На стороне сервера вам придется декодировать URL данных.

0 голосов
/ 09 мая 2011

В браузерах нет встроенной функции JS, которая позволила бы вам, к сожалению, превратить изображение в HTML.Таким образом, вам понадобится что-то вроде плагина для браузера или установленного расширения с JS API, в которое вы можете обращаться.Но даже тогда, очевидно, потребуется установить плагин в браузере этого пользователя.

...