Apakah ada cara untuk merender html ke gambar seperti PNG? Saya tahu itu mungkin dengan kanvas tetapi saya ingin membuat elemen html standar seperti div misalnya.

Saya tahu ini adalah pertanyaan lama yang sudah memiliki banyak jawaban, namun saya masih menghabiskan waktu berjam-jam untuk benar-benar melakukan apa yang saya inginkan:

• diberi file html, hasilkan gambar (png) dengan latar belakang transparan dari baris perintah

Menggunakan Chrome headless (versi 74.0.3729.157 pada respons ini), sebenarnya mudah:

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

Penjelasan perintah:

• Anda menjalankan Chrome dari baris perintah (ditampilkan di sini untuk Mac, tetapi dengan asumsi serupa pada Windows atau Linux)
• --headless menjalankan Chrome tanpa membukanya dan keluar setelah perintah selesai
• --screenshotakan menangkap tangkapan layar (perhatikan bahwa itu menghasilkan file yang disebut screenshot.pngdi folder tempat perintah dijalankan)
• --window-sizememungkinkan untuk hanya mengambil sebagian dari layar (formatnya --window-size=width,height)
• --default-background-color=0adalah trik sulap yang memberi tahu Chrome untuk menggunakan latar belakang transparan , bukan warna putih default
• akhirnya Anda memberikan file html (sebagai url baik lokal maupun jarak jauh ...)

Iya. HTML2Canvas ada untuk merender HTML <canvas>(yang kemudian dapat Anda gunakan sebagai gambar).

CATATAN: Ada masalah yang diketahui, bahwa ini tidak akan berfungsi dengan SVG

Bolehkah saya merekomendasikan perpustakaan dom-ke-gambar , yang ditulis semata-mata untuk mengatasi masalah ini (saya pengelola).
Inilah cara Anda menggunakannya (beberapa lagi di sini ):

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

Ada banyak pilihan dan mereka semua memiliki pro dan kontra.

Opsi 1: Gunakan salah satu dari banyak perpustakaan yang tersedia

• dom-to-image
• wkhtmltoimage (termasuk dalam alat wkhtmltopdf)
• IMGKit (untuk ruby ​​dan berdasarkan wkhtmltoimage)
• imgkit (untuk python dan berdasarkan wkhtmltoimage)
• python-webkit2png
• ...

Pro

• Konversi sebagian besar cukup cepat

Cons

• Rendering yang buruk
• Tidak menjalankan javascript
• Tidak ada dukungan untuk fitur web terkini (FlexBox, Selectors Lanjutan, Webfonts, Ukuran Kotak, Kueri Media, ...)
• Terkadang tidak begitu mudah untuk menginstal
• Rumit dengan skala

Opsi 2: Gunakan PhantomJs dan mungkin pustaka pembungkus

• Hantu
• node-webshot (pustaka pembungkus javascript untuk PhantomJs)
• ...

Pro

• Jalankan Javascript
• Cukup cepat

Cons

• Rendering yang buruk
• Tidak ada dukungan untuk fitur web terkini (FlexBox, Selectors Lanjutan, Webfonts, Ukuran Kotak, Kueri Media, ...)
• Rumit dengan skala
• Tidak begitu mudah untuk membuatnya berfungsi jika ada gambar yang akan dimuat ...

Opsi 3: Gunakan Chrome Headless dan mungkin perpustakaan pembungkus

• Tanpa Kepala Chrome
• chrome-devtools-protocol
• Dalang (perpustakaan pembungkus javascript untuk Chrome tanpa kepala)
• ...

Pro

• Jalankan Javascript
• Render yang mendekati sempurna

Cons

• Tidak begitu mudah mendapatkan hasil yang diinginkan mengenai:
  • waktu pemuatan halaman
  • dimensi viewport
• Rumit dengan skala
• Cukup lambat dan bahkan lebih lambat jika html berisi tautan eksternal

Opsi 4: Gunakan API

• ApiFlash (berdasarkan chrome)
• EvoPDF (memiliki opsi untuk html)
• Grabzit
• HTML / CSS ke API Gambar
• ...

Pro

• Jalankan Javascript
• Render yang mendekati sempurna
• Cepat saat opsi caching digunakan dengan benar
• Skala ditangani oleh API
• Waktu yang tepat, viewport, ...
• Sebagian besar waktu mereka menawarkan paket gratis

Cons

• Tidak gratis jika Anda berencana untuk sering menggunakannya

Disclosure: Saya adalah pendiri ApiFlash. Saya melakukan yang terbaik untuk memberikan jawaban yang jujur ​​dan bermanfaat.

Semua jawaban di sini menggunakan perpustakaan pihak ketiga saat merender HTML ke gambar bisa relatif sederhana dalam Javascript murni. Ada yang bahkan sebuah artikel tentang hal itu pada bagian kanvas di MDN.

Kuncinya adalah ini:

• buat SVG dengan simpul foreignObject yang berisi XHTML Anda
• atur src gambar ke url data SVG itu
• drawImage ke atas kanvas
• atur data kanvas ke target 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()
}

Beberapa hal yang perlu diperhatikan

• HTML di dalam SVG haruslah XHTML
• Demi alasan keamanan, SVG sebagai url data gambar berfungsi sebagai ruang lingkup CSS yang terisolasi untuk HTML karena tidak ada sumber eksternal yang dapat dimuat. Jadi font Google misalnya harus digarisbawahi menggunakan alat seperti ini .
• Bahkan ketika HTML di dalam SVG melebihi ukuran gambar, ia akan menggambar ke kanvas dengan benar. Tetapi ketinggian sebenarnya tidak dapat diukur dari gambar itu. Solusi ketinggian tetap akan bekerja dengan baik tetapi ketinggian dinamis akan membutuhkan sedikit lebih banyak pekerjaan. Yang terbaik adalah merender data SVG menjadi iframe (untuk lingkup CSS terisolasi) dan menggunakan ukuran yang dihasilkan untuk kanvas.

Anda bisa menggunakan PhantomJS , yang merupakan webkit tanpa kepala (mesin rendering di safari dan (hingga baru-baru ini) driver chrome). Anda dapat mempelajari cara melakukan tangkapan layar halaman di sini . Semoga itu bisa membantu!

Anda dapat menggunakan alat HTML ke PDF seperti wkhtmltopdf. Dan kemudian Anda dapat menggunakan alat PDF untuk gambar seperti imagemagick. Memang ini adalah sisi server dan proses yang sangat berbelit-belit ...

Satu-satunya perpustakaan yang saya gunakan untuk Chrome, Firefox, dan MS Edge adalah rasterizeHTML . Ini menghasilkan kualitas yang lebih baik daripada HTML2Canvas dan masih didukung tidak seperti HTML2Canvas.

Mendapatkan Elemen dan Mengunduh sebagai 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);
            }
     });

Gunakan html2canvas cukup sertakan plugin dan metode panggilan untuk mengkonversi HTML ke Canvas kemudian unduh sebagai PNG gambar

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

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

Saya tidak berharap ini menjadi jawaban terbaik, tetapi sepertinya cukup menarik untuk dikirim.

Tulis aplikasi yang membuka browser favorit Anda ke dokumen HTML yang diinginkan, ukuran jendela dengan benar, dan mengambil screenshot. Kemudian, hapus batas gambar.

Gunakan kode ini, pasti akan bekerja:

<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>

Hanya saja, jangan lupa untuk memasukkan file Html2CanvasJS dalam program Anda. https://html2canvas.hertzen.com/dist/html2canvas.js

Anda tidak dapat melakukan ini 100% akurat hanya dengan JavaScript.

Ada alat Qt Webkit di luar sana, dan versi python . Jika Anda ingin melakukannya sendiri, saya sudah sukses dengan Cocoa:

[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];
}];

Semoga ini membantu!

Instal phantomjs

$ npm install phantomjs

Buat file github.js dengan kode berikut

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

Berikan file sebagai argumen ke phantomjs

$ phantomjs github.js

HtmlToImage.jar akan menjadi cara paling sederhana untuk mengubah html menjadi gambar

Konversi HTML ke gambar menggunakan java

Anda dapat menambahkan referensi HtmlRenderer ke proyek Anda dan melakukan hal berikut,

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