lưu/xuất tệp hình ảnh từ nội dung html?

Question

Tôi có một kịch bản rằng, tôi đang tạo nội dung html động và tôi cần xuất/lưu nội dung html vào một tệp hình ảnh với php, jQuery và JavaScript [hoặc với bất kỳ nội dung nào khác nếu có thể].

Answer 1

Sau khi tất cả tôi đã quyết định sử dụng mã php

GD and Image Functions

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

với điều này, tôi có đã tạo các phần tử html cụ thể tại các vị trí cụ thể với hình ảnh.

cảm ơn tất cả vì đã đóng góp.

Answer 2

Bạn có thể vẽ html lên canvas. https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

và sau đó lưu canvas dưới dạng hình ảnh vào máy chủ. http://motyar.blogspot.com/2010/04/save-html5-canvas-data-as-image.html

Hoặc gửi html vào máy chủ và làm cho nó server-side:

https://github.com/visionmedia/screenshot-app hoặc http://cutycapt.sourceforge.net/

Answer 3

Bạn có thể sử dụng HTML5 canvas và phương pháp toDataURL. Ví dụ:

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

Bạn có thể điều chỉnh trên cùng, trái, chiều rộng và chiều cao để chỉ chụp một phần của trang web.

Kết quả là chuỗi URI dữ liệu. Bạn có thể gửi nó đến máy chủ của bạn hoặc vẽ nó trên canvas khác:

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

Plugin của bạn có thể sử dụng phương pháp này. Bạn cũng có thể kiểm tra mã nguồn của nó.

Edit: Để gửi nó tới máy chủ của bạn với JQuery bạn có thể làm một cái gì đó như thế:

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

Về phía server bạn sẽ phải giải mã URL dữ liệu.

Dựa trên "Michaël Witrant" câu trả lời xem: Compile/Save/Export HTML as a PNG Image using Jquery

Answer 4

tôi đặt vải bản thân mình và không sử dụng createElement dòng trên Bạn có thể cần phải thêm dòng này trước khi drawWindow() để có được quyền truy cập bảo mật từ người dùng. Xem http://murfy.de/read/webgl-drawWindow

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

Nếu bạn muốn lưu hình ảnh như PNG vv, tôi thấy một kịch bản rất hữu ích tại địa chỉ: http://www.nihilogic.dk/labs/canvas2image/