save/export image file from html content?

Question

我有一个场景，我正在创建动态的HTML内容，我需要导出/保存html内容到一个图像文件与PHP，jQuery和JavaScript [或任何其他如果可能]。

Answer 1

You can draw the html onto a canvas. https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

and then save the canvas as an image to the server. http://motyar.blogspot.com/2010/04/save-html5-canvas-data-as-image.html

Or send the html to the server and render it server-side :

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

Answer 2

You can use HTML5 canvas and the toDataURL method. For example:

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

You can adjust top, left, width and height to capture only a part of the web page.

The result is a data URI string. You can send it to your server or draw it on another canvas:

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

Your plugin probably uses this method. You can also check its source code.

Edit: To send it to your server with JQuery you can do something like that:

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

On the server side you'll have to decode the data URL.

Based on "Michaël Witrant" answer look at : Compile/Save/Export HTML as a PNG Image using Jquery

Answer 3

I put the canvas myself and did not use createElement line above You probably need to add this line before drawWindow() to get security permissions from user. See http://murfy.de/read/webgl-drawWindow

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

If you want to save the image as PNG etc, I found a useful script at: http://www.nihilogic.dk/labs/canvas2image/

Answer 4

After all i have decided to use the code php

GD and Image Functions

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

with this, i have created the specific html elements at specific positions with images.

thanks all for contributing.