Có cách nào để kết xuất html thành hình ảnh như PNG không? Tôi biết rằng có thể với canvas nhưng tôi muốn kết xuất phần tử html tiêu chuẩn như div chẳng hạn.

Tôi biết đây là một câu hỏi khá cũ đã có rất nhiều câu trả lời, nhưng tôi vẫn dành hàng giờ cố gắng để thực sự làm những gì tôi muốn:

• đưa ra một tệp html, tạo một hình ảnh (png) với nền trong suốt từ dòng lệnh

Sử dụng Chrome không đầu (phiên bản 74.0.3729.157 cho phản hồi này), thực sự dễ dàng:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html

Giải thích về lệnh:

• bạn chạy Chrome từ dòng lệnh (ở đây hiển thị cho Mac, nhưng giả sử tương tự trên Windows hoặc Linux)
• --headless chạy Chrome mà không mở nó và thoát sau khi lệnh hoàn thành
• --screenshot sẽ chụp ảnh màn hình (lưu ý rằng nó tạo ra một tệp có tên screenshot.png trong thư mục nơi lệnh được chạy)
• --window-size chỉ cho phép chụp một phần màn hình (định dạng là --window-size=width,height )
• --default-background-color=0là trò ảo thuật bảo Chrome sử dụng minh bạch nền chứ không phải màu trắng mặc định
• cuối cùng bạn cung cấp tệp html (dưới dạng url hoặc cục bộ hoặc từ xa ...)

Đúng. HTML2Canvas tồn tại để hiển thị HTML lên<canvas> (mà sau đó bạn có thể sử dụng làm hình ảnh).

LƯU Ý: Có một vấn đề đã biết, điều này sẽ không hoạt động với SVG

Tôi có thể giới thiệu thư viện dom-to-image , được viết riêng để giải quyết vấn đề này (Tôi là người bảo trì).
Đây là cách bạn sử dụng nó (một số chi tiết ở đây ):

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then (function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Có rất nhiều lựa chọn và tất cả đều có ưu và nhược điểm của họ.

Tùy chọn 1: Sử dụng một trong nhiều thư viện có sẵn

• hình ảnh
• wkhtmltoimage (có trong công cụ wkhtmltopdf)
• IMGKit (cho ruby ​​và dựa trên wkhtmltoimage)
• imgkit (cho python và dựa trên wkhtmltoimage)
• python-webkit2png
• ...

Ưu

• Chuyển đổi khá nhanh hầu hết thời gian

Nhược điểm

• Kết xuất xấu
• Không thực thi javascript
• Không hỗ trợ cho các tính năng web gần đây (FlexBox, Bộ chọn nâng cao, Webfont, Định cỡ hộp, Truy vấn phương tiện, ...)
• Đôi khi không dễ cài đặt
• Biến chứng

Tùy chọn 2: Sử dụng PhantomJs và có thể là thư viện trình bao bọc

• PhantomJs
• nút-webshot (thư viện trình bao bọc javascript cho PhantomJs)
• ...

Ưu

• Thực thi Javascript
• Khá nhanh

Nhược điểm

• Kết xuất xấu
• Không hỗ trợ cho các tính năng web gần đây (FlexBox, Bộ chọn nâng cao, Webfont, Định cỡ hộp, Truy vấn phương tiện, ...)
• Biến chứng
• Không dễ để làm cho nó hoạt động nếu có hình ảnh được tải ...

Tùy chọn 3: Sử dụng Chrome Headless và có thể là thư viện trình bao bọc

• Chrome không đầu
• chrome-devtools-giao thức
• Puppeteer (thư viện trình bao bọc javascript cho Chrome không đầu)
• ...

Ưu

• Thực thi Javascript
• Kết xuất gần hoàn hảo

Nhược điểm

• Không dễ để có chính xác kết quả mong muốn liên quan đến:
  • thời gian tải trang
  • kích thước khung nhìn
• Biến chứng
• Khá chậm và thậm chí chậm hơn nếu html chứa các liên kết bên ngoài

Tùy chọn 4: Sử dụng API

• ApiFlash (dựa trên chrome)
• EvoPDF (có một tùy chọn cho html)
• Grabzit
• API HTML / CSS sang hình ảnh
• ...

Ưu

• Thực thi Javascript
• Kết xuất gần hoàn hảo
• Nhanh khi các tùy chọn bộ nhớ đệm được sử dụng chính xác
• Tỷ lệ được xử lý bởi các API
• Thời gian chính xác, chế độ xem, ...
• Hầu hết thời gian họ cung cấp một gói miễn phí

Nhược điểm

• Không miễn phí nếu bạn có kế hoạch sử dụng chúng nhiều

Tiết lộ: Tôi là người sáng lập ApiFlash. Tôi đã làm hết sức mình để cung cấp một câu trả lời trung thực và hữu ích.

Tất cả các câu trả lời ở đây sử dụng thư viện của bên thứ ba trong khi hiển thị HTML thành hình ảnh có thể tương đối đơn giản trong Javascript thuần túy. Có được thậm chí còn một bài viết về nó trên phần vải trên MDN.

Bí quyết là thế này:

• tạo một SVG với nút ForeignObject chứa XHTML của bạn
• đặt src của hình ảnh thành url dữ liệu của SVG đó
• drawImage lên tấm bạt
• đặt dữ liệu canvas vào mục tiêu image.src

const {body} = document

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = canvas.height = 100

const tempImg = document.createElement('img')
tempImg.addEventListener('load', onTempImageLoad)
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>')

const targetImg = document.createElement('img')
body.appendChild(targetImg)

function onTempImageLoad(e){
  ctx.drawImage(e.target, 0, 0)
  targetImg.src = canvas.toDataURL()
}

Một số điều cần lưu ý

• HTML bên trong SVG phải là XHTML
• Vì lý do bảo mật, SVG là url dữ liệu của hình ảnh hoạt động như một phạm vi CSS bị cô lập cho HTML do không có nguồn bên ngoài nào có thể được tải. Vì vậy, một phông chữ Google chẳng hạn phải được nội tuyến bằng một công cụ như thế này .
• Ngay cả khi HTML bên trong SVG vượt quá kích thước của hình ảnh, nó sẽ vẽ chính xác lên khung vẽ. Nhưng chiều cao thực tế không thể đo được từ hình ảnh đó. Một giải pháp chiều cao cố định sẽ hoạt động tốt nhưng chiều cao động sẽ đòi hỏi công việc nhiều hơn một chút. Cách tốt nhất là kết xuất dữ liệu SVG thành iframe (đối với phạm vi CSS bị cô lập) và sử dụng kích thước kết quả cho khung vẽ.

Bạn có thể sử dụng PhantomJS , đây là một webkit không đầu (công cụ kết xuất trong safari và trình điều khiển chrome (cho đến gần đây). Bạn có thể tìm hiểu làm thế nào để chụp màn hình các trang ở đây . Mong rằng sẽ giúp!

Bạn có thể sử dụng công cụ HTML sang PDF như wkhtmltopdf. Và sau đó bạn có thể sử dụng một công cụ PDF thành hình ảnh như hình ảnh. Phải thừa nhận rằng đây là phía máy chủ và một quy trình rất phức tạp ...

Thư viện duy nhất tôi có thể làm việc cho Chrome, Firefox và MS Edge là rasterizeHTML . Nó cho ra chất lượng tốt hơn HTML2Canvas và vẫn được hỗ trợ không giống như HTML2Canvas.

Lấy phần tử và tải xuống dưới dạng PNG

var node= document.getElementById("elementId");
var canvas = document.createElement("canvas");
canvas.height = node.offsetHeight;
canvas.width = node.offsetWidth;
var name = "test.png"

rasterizeHTML.drawHTML(node.outerHTML, canvas)
     .then(function (renderResult) {
            if (navigator.msSaveBlob) {
                window.navigator.msSaveBlob(canvas.msToBlob(), name);
            } else {
                const a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none";
                a.href = canvas.toDataURL();
                a.download = name;
                a.click();
                document.body.removeChild(a);
            }
     });

Sử dụng html2canvas chỉ bao gồm plugin và phương thức gọi để chuyển đổi HTML sang Canvas sau đó tải xuống dưới dạng hình ảnh PNG

        html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "manpower_efficiency.jpg";
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
        });

Nguồn : http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

Tôi không hy vọng đây sẽ là câu trả lời hay nhất, nhưng nó có vẻ đủ thú vị để đăng.

Viết một ứng dụng mở trình duyệt yêu thích của bạn vào tài liệu HTML mong muốn, kích thước cửa sổ chính xác và chụp ảnh màn hình. Sau đó, loại bỏ các đường viền của hình ảnh.

Sử dụng mã này, nó chắc chắn sẽ hoạt động:

<script type="text/javascript">
 $(document).ready(function () {
	 setTimeout(function(){
		 downloadImage();
	 },1000)
 });
 
 function downloadImage(){
	 html2canvas(document.querySelector("#dvContainer")).then(canvas => {
		a = document.createElement('a'); 
		document.body.appendChild(a); 
		a.download = "test.png"; 
		a.href =  canvas.toDataURL();
		a.click();
	});	 
 }
</script>

Chỉ cần đừng quên bao gồm tệp Html2CanvasJS trong chương trình của bạn. https://html2canvas.hertzen.com/dist/html2canvas.js

Bạn không thể làm điều này chính xác 100% chỉ với JavaScript.

Có một công cụ Qt Webkit ngoài đó và một phiên bản python . Nếu bạn muốn tự làm, tôi đã thành công với ca cao:

[self startTraverse:pagesArray performBlock:^(int collectionIndex, int pageIndex) {

    NSString *locale = [self selectedLocale];

    NSRect offscreenRect = NSMakeRect(0.0, 0.0, webView.frame.size.width, webView.frame.size.height);
    NSBitmapImageRep* offscreenRep = nil;      

    offscreenRep = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:nil
                                             pixelsWide:offscreenRect.size.width
                                             pixelsHigh:offscreenRect.size.height
                                             bitsPerSample:8
                                             samplesPerPixel:4
                                             hasAlpha:YES
                                             isPlanar:NO
                                             colorSpaceName:NSCalibratedRGBColorSpace
                                             bitmapFormat:0
                                             bytesPerRow:(4 * offscreenRect.size.width)
                                             bitsPerPixel:32];

    [NSGraphicsContext saveGraphicsState];

    NSGraphicsContext *bitmapContext = [NSGraphicsContext graphicsContextWithBitmapImageRep:offscreenRep];
    [NSGraphicsContext setCurrentContext:bitmapContext];
    [webView displayRectIgnoringOpacity:offscreenRect inContext:bitmapContext];
    [NSGraphicsContext restoreGraphicsState];

    // Create a small + large thumbs
    NSImage *smallThumbImage = [[NSImage alloc] initWithSize:thumbSizeSmall];  
    NSImage *largeThumbImage = [[NSImage alloc] initWithSize:thumbSizeLarge];

    [smallThumbImage lockFocus];
    [[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];  
    [offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];  
    NSBitmapImageRep *smallThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];  
    [smallThumbImage unlockFocus];  

    [largeThumbImage lockFocus];  
    [[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];  
    [offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];  
    NSBitmapImageRep *largeThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];  
    [largeThumbImage unlockFocus];  

    // Write out small
    NSString *writePathSmall = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_small.png", locale, collectionIndex, pageIndex]];
    NSData *dataSmall = [smallThumbOutput representationUsingType:NSPNGFileType properties: nil];
    [dataSmall writeToFile:writePathSmall atomically: NO];

    // Write out lage
    NSString *writePathLarge = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_large.png", locale, collectionIndex, pageIndex]];
    NSData *dataLarge = [largeThumbOutput representationUsingType:NSPNGFileType properties: nil];
    [dataLarge writeToFile:writePathLarge atomically: NO];
}];

Hi vọng điêu nay co ich!

Cài đặt ph Phantomjs

$ npm install phantomjs

Tạo một tệp github.js với mã sau

var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
page.open('http://github.com/', function() {
    page.render('github.png');
    phantom.exit();
});

Truyền tệp dưới dạng đối số cho ph Phantomjs

$ phantomjs github.js

HtmlToImage.jar sẽ là cách đơn giản nhất để chuyển đổi html thành hình ảnh

Chuyển đổi HTML sang hình ảnh bằng java

Bạn có thể thêm tham chiếu HtmlRenderer vào dự án của bạn và làm như sau,

string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));