PNG gibi resme html oluşturmanın bir yolu var mı? Tuval ile mümkün olduğunu biliyorum ama örneğin div gibi standart html elemanını işlemek istiyorum.

Bunun zaten çok fazla cevabı olan oldukça eski bir soru olduğunu biliyorum, ancak hala istediğimi yapmaya çalışarak saatler geçirdim:

• bir html dosyası verildiğinde , komut satırından saydam arka planı olan bir (png) resmi oluşturun

Chrome başsız (bu yanıttan itibaren sürüm 74.0.3729.157) kullanmak aslında kolaydır:

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

Komutun açıklaması:

• Chrome'u komut satırından çalıştırırsınız (burada Mac için gösterilir, ancak Windows veya Linux'ta benzer olduğu varsayılarak)
• --headless Chrome'u açmadan çalıştırır ve komut tamamlandıktan sonra çıkış yapar
• --screenshotbir ekran görüntüsü yakalar ( screenshot.pngkomutun çalıştırıldığı klasörde çağrılan bir dosya oluşturduğunu unutmayın )
• --window-sizeekranın yalnızca bir kısmını yakalamaya izin ver (biçim --window-size=width,height)
• --default-background-color=0Chrome'a varsayılan beyaz rengi değil şeffaf bir arka plan kullanmasını söyleyen sihir
• Son olarak html dosyasını sağlarsınız (yerel veya uzak bir url olarak ...)

Evet. HTML2Canvas , HTML'yi oluşturmak için var <canvas>(daha sonra resim olarak kullanabilirsiniz).

NOT: Bunun SVG ile çalışmayacağı bilinen bir sorun var

Ben sadece bu sorunu çözmek için yazılmış dom-görüntü kitaplığı tavsiye edebilir miyim (ben koruyucusuyum).
Bunu nasıl kullanacağınız (bazıları burada ):

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

Çok fazla seçenek var ve hepsinin pro ve eksileri var.

Seçenek 1: Mevcut birçok kütüphaneden birini kullanın

• dom-to-görüntü
• wkhtmltoimage (wkhtmltopdf aracında bulunur)
• IMGKit (ruby için ve wkhtmltoimage tabanlı)
• imgkit (python için ve wkhtmltoimage tabanlı)
• piton-webkit2png
• ...

Artıları

• Dönüşüm çoğu zaman oldukça hızlı

Eksileri

• Kötü oluşturma
• Javascript çalıştırmaz
• Son web özellikleri için destek yok (FlexBox, Gelişmiş Seçiciler, Web Yazı Tipleri, Kutu Boyutlandırma, Medya Sorguları, ...)
• Bazen kurulumu o kadar kolay değil
• Ölçek için karmaşık

Seçenek 2: PhantomJ'ler ve belki de bir sarıcı kitaplığı kullanın

• PhantomJs
• node-webshot (PhantomJ'ler için javascript sarmalayıcı kitaplığı)
• ...

Artıları

• Javascript Yürüt
• Oldukça hızlı

Eksileri

• Kötü oluşturma
• Son web özellikleri için destek yok (FlexBox, Gelişmiş Seçiciler, Web Yazı Tipleri, Kutu Boyutlandırma, Medya Sorguları, ...)
• Ölçek için karmaşık
• Yüklenecek resimler varsa çalışmasını sağlamak o kadar kolay değil ...

3. Seçenek: Chrome Başsız ve belki bir sarmalayıcı kitaplığı kullanın

• Krom Başsız
• krom devtools-protokol
• Kuklacı (Chrome başsız için javascript sarmalayıcı kitaplığı)
• ...

Artıları

• Javascript Yürüt
• Mükemmel görüntülemeye yakın

Eksileri

• Aşağıdakilerle ilgili istenen sonuca sahip olmak o kadar kolay değil:
  • sayfa yükleme zamanlaması
  • görünüm alanı boyutları
• Ölçek için karmaşık
• Html harici bağlantılar içeriyorsa oldukça yavaş ve daha yavaş

4. Seçenek: Bir API kullanın

• ApiFlash (krom tabanlı)
• EvoPDF (html için bir seçenek var)
• Grabzit
• HTML / CSS - Resim API'sı
• ...

Artıları

• Javascript Yürüt
• Mükemmel görüntülemeye yakın
• Önbellek seçenekleri doğru kullanıldığında hızlı
• Ölçek API'lar tarafından yönetilir
• Hassas zamanlama, görüntü alanı, ...
• Çoğu zaman ücretsiz bir plan sunarlar

Eksileri

• Onları çok kullanmayı planlıyorsanız ücretsiz değil

Açıklama: ApiFlash'ın kurucusuyum. Dürüst ve faydalı bir cevap vermek için elimden geleni yaptım.

Buradaki tüm yanıtlar üçüncü taraf kitaplıklarını kullanırken bir görüntüye HTML oluştururken saf Javascript'te nispeten basit olabilir. Orada olduğunu bile oldu bu konuda bir makale MDN'yi üzerinde tuval bölümünde.

İşin püf noktası şudur:

• XHTML'nizi içeren bir foreignObject düğümü olan bir SVG oluşturun
• görüntünün src'sini bu SVG'nin veri URL'sine ayarlama
• drawImage tuval üzerine
• tuval verilerini image.src'yi hedef alacak şekilde ayarlama

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

Dikkat edilmesi gereken bazı şeyler

• SVG'nin içindeki HTML XHTML olmalıdır
• Güvenlik nedeniyle, görüntünün veri url'si olarak SVG, harici kaynaklar yüklenemediğinden HTML için yalıtılmış bir CSS kapsamı görevi görür. Yani örneğin bir Google yazı gibi bir araç kullanarak satır içine yerleştirilmiş zorundadır bu bir .
• SVG'nin içindeki HTML görüntünün boyutunu aşsa bile tuval üzerine doğru şekilde çizilir. Ancak gerçek yükseklik bu görüntüden ölçülemez. Sabit yükseklik çözümü gayet iyi çalışır ancak dinamik yükseklik biraz daha fazla çalışma gerektirir. En iyisi, SVG verilerini bir iframe'e (izole CSS kapsamı için) dönüştürmek ve elde edilen boyutu tuval için kullanmaktır.

Başsız bir webkit (safari ve (yakın zamana kadar krom işleme platformu ) sürücüsü olan PhantomJS'yi kullanabilirsiniz . Sayfaların ekran yakalama yapmak öğrenebilirsiniz burada . Umarım yardımcı olur!

Wkhtmltopdf gibi bir HTML'den PDF'ye aracını kullanabilirsiniz. Ve sonra imagemagick gibi bir görüntü aracı için PDF kullanabilirsiniz. Kuşkusuz bu sunucu tarafı ve çok kıvrımlı bir süreç ...

Chrome, Firefox ve MS Edge için çalışmam gereken tek kütüphane rasterleştirildiHTML . HTML2Canvas'tan daha kaliteli çıktı ve HTML2Canvas'ın aksine hala destekleniyor.

Öğe Alma ve PNG Olarak İndirme

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

HTML'yi Tuval'e dönüştürmek için eklenti ve çağrı yöntemini içeren html2canvas kullanın ve ardından resim PNG olarak indirin

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

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

Bunun en iyi cevap olmasını beklemiyorum, ancak göndermek için yeterince ilginç görünüyordu.

Favori tarayıcınızı istediğiniz HTML belgesine açan, pencereyi doğru şekilde boyutlandıran ve ekran görüntüsü alan bir uygulama yazın. Ardından, görüntünün kenarlıklarını kaldırın.

Bu kodu kullanın, kesinlikle işe yarayacaktır:

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

Html2CanvasJS dosyasını programınıza eklemeyi unutmayın. https://html2canvas.hertzen.com/dist/html2canvas.js

Bunu yalnızca% 100 JavaScript ile doğru şekilde yapamazsınız.

Orada bir Qt Webkit aracı ve bir python sürümü var . Kendiniz yapmak isterseniz, Kakao ile başarılı oldum:

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

Bu yardımcı olur umarım!

Phantomjs yükleyin

$ npm install phantomjs

Aşağıdaki kodla github.js dosyası oluşturun

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

Dosyayı argüman olarak phantomjs'e iletin

$ phantomjs github.js

HtmlToImage.jar, bir HTML'yi bir resme dönüştürmenin en basit yolu olacaktır

Java kullanarak HTML'yi görüntüye dönüştürme

Şunları yapabilirsiniz referans eklemek HtmlRenderer , projenize ve aşağıdakileri yapın

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