Сохранить/экспортировать файл изображения из содержимого html?

Ответ 1

В конце концов я решил использовать код php

GD и функции изображения

http://php.net/manual/en/ref.image.php

с этим, Я создал конкретные элементы html в определенных позициях с изображениями.

благодарит всех за вклад.

Ответ 2

Вы можете нарисовать html на холсте. https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

а затем сохраните холст в качестве изображения на сервере. http://motyar.blogspot.com/2010/04/save-html5-canvas-data-as-image.html

Или отправьте html на сервер и сделайте его server-side:

https://github.com/visionmedia/screenshot-app или http://cutycapt.sourceforge.net/

Ответ 3

Вы можете использовать холст HTML5 и метод 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', '');
};

Вы можете настроить верхнюю, левую, ширину и высоту, чтобы захватывать только часть веб-страницы.

В результате получается строка 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-адрес данных.

Основано на ответе "Michaël Witrant" посмотри на: Скомпилировать/Сохранить/Экспортировать HTML в виде PNG-изображения с помощью JQuery

Ответ 4

Я положил сам холст и не использовал строку createElement выше Вероятно, вам нужно добавить эту строку до drawWindow(), чтобы получить разрешения безопасности от пользователя. См. http://murfy.de/read/webgl-drawWindow

netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

Если вы хотите сохранить изображение как PNG и т.д., я нашел полезный script в: http://www.nihilogic.dk/labs/canvas2image/