Нарисуйте содержимое элемента на веб-сайте Canvas Element / Capture как изображение, используя (?) Язык - PullRequest
Новая
       15

Нарисуйте содержимое элемента на веб-сайте Canvas Element / Capture как изображение, используя (?) Язык

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

Я задал вопрос на SO о компиляции файла изображения из HTML.Микаэль Витрант ответил и рассказал мне об элементе canvas и html5.

Я посмотрел в сети и SO, но я не нашел ничего относительно рисования содержимого элемента misc на холстеВозможно ли это?

Например, скажем, у меня есть div с фоновым изображением.Есть ли способ получить этот элемент и его фоновое изображение «на» холсте?Я спрашиваю, потому что я нашел скрипт, который позволяет сохранить элемент canvas как PNG, но я действительно хочу сохранить коллекцию элементов DOM в виде изображения.

EDIT

Неважно, на каком языке, если он может работать, я готов попробовать.

Ответы [ 3 ]

1 голос
/ 19 мая 2011

Для записи, drawWindow работает только в Firefox.

Этот код будет работать только локально, а не в Интернете, использование drawWindow с внешним элементом создает исключение безопасности.

Вы должны предоставить нам гораздо больше контекста, прежде чем мы сможем ответить на что-либо еще.

0 голосов
/ 17 мая 2018

После многих попыток использования параметров drawWindow, которые рисовали неправильные части или элемент, мне удалось сделать это с помощью двухэтапной обработки: сначала захватить всю страницу на холсте, а затем нарисовать часть этого холста на другом.

Это было сделано в расширении XUL. drawWindow не будет работать в других браузерах и может не работать в непривилегированном контексте по соображениям безопасности. 

function nodeScreenshot(aSaveLocation, aFileName, aDocument, aCSSSelector) {
  var doc = aDocument;
  var win = doc.defaultView;
  var body = doc.body;
  var html = doc.documentElement;

  var selection = aCSSSelector
    ? Array.prototype.slice.call(doc.querySelectorAll(aCSSSelector))
    : [];

  var coords = {
    top: 0,
    left: 0,
    width: Math.max(body.scrollWidth, body.offsetWidth, 
                      html.clientWidth, html.scrollWidth, html.offsetWidth),
    height: Math.max(body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight)

  var canvas = document.createElement("canvas");

  canvas.width = coords.width;
  canvas.height = coords.height;

  var context = canvas.getContext("2d");
  // Draw the whole page
  // coords.top and left are 0 here, I tried to pass the result of
  // getBoundingClientRect() here but drawWindow was drawing another part,
  // maybe because of a margin/padding/position ? Didn't solve it.
  context.drawWindow(win, coords.top, coords.left,
                     coords.width, coords.height, 'rgb(255,255,255)');

  if (selection.length) {
    var nodeCoords = selection[0].getBoundingClientRect();
    var tempCanvas = document.createElement("canvas");
    var tempContext = tempCanvas.getContext("2d");

    tempCanvas.width = nodeCoords.width;
    tempCanvas.height = nodeCoords.height;
    // Draw the node part from the whole page canvas into another canvas
    // void ctx.drawImage(image, sx, sy, sLargeur, sHauteur,
                                 dx, dy, dLargeur, dHauteur)
    tempContext.drawImage(canvas,
      nodeCoords.left, nodeCoords.top, nodeCoords.width, nodeCoords.height,
      0, 0, nodeCoords.width, nodeCoords.height);

    canvas = tempCanvas;
    context = tempContext;
  }

  var dataURL = canvas.toDataURL('image/jpeg', 0.95);
  return dataURL;
}
0 голосов
/ 10 мая 2012

http://cutycapt.sourceforge.net/

CutyCapt - это утилита командной строки, которая использует Webkit для рендеринга HTML в PNG, PDF, SVG и т. Д. Вам необходимо каким-либо образом взаимодействовать с ним (например, shell_exec в PHP),но это довольно надежноСайты отображаются точно так же, как в браузерах Webkit.

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

...