แสดง HTML เป็นรูปภาพ


167

มีวิธีในการแสดง html เป็นภาพเช่น PNG หรือไม่? ฉันรู้ว่ามันเป็นไปได้กับผืนผ้าใบ แต่ฉันต้องการที่จะแสดงองค์ประกอบ html มาตรฐานเช่น div เช่น


เพื่อสร้างความช่วยเหลือผู้ใช้บางประเภทเช่น น่าเศร้าที่มันเป็นไปไม่ได้ (สำหรับเหตุผลด้านความปลอดภัย) คุณต้องขอให้ผู้ใช้กด PrintScreen เพื่อทำอะไรบางอย่าง
MaxArt

1
มีความเป็นไปได้ที่ซ้ำกันของวิธีแปลง HTML ของเว็บไซต์เป็นภาพ?
Ernest Friedman-Hill

ฉันต้องการใช้ HTML / CSS เพื่อออกแบบโลโก้
Martin Delille

4
@ ErnestFriedman-Hill ไม่เหมือนกัน: คำถามที่คุณพูดถึงนี้เป็นคำถามเฉพาะของจาวา
Martin Delille

นี่คือการสอนทีละขั้นตอนสำหรับการแปลง HTML เป็น IMAGE รูปแบบ png หรือ jpeg codepedia.info/2016/02/30
Satinder singh

คำตอบ:


42

ฉันรู้ว่านี่เป็นคำถามเก่าที่มีคำตอบมากมายอยู่แล้ว แต่ฉันยังใช้เวลาหลายชั่วโมงในการพยายามทำสิ่งที่ฉันต้องการ:

  • กำหนดไฟล์ html สร้างภาพ (png) ที่มีพื้นหลังโปร่งใสจากบรรทัดคำสั่ง

การใช้หัวขาดของ Chrome (รุ่น 74.0.3729.157 เป็นการตอบสนองนี้) มันง่ายจริง ๆ :

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

คำอธิบายของคำสั่ง:

  • คุณเรียกใช้ Chrome จากบรรทัดคำสั่ง (แสดงที่นี่สำหรับ Mac แต่สมมติว่าคล้ายกันใน Windows หรือ Linux)
  • --headless เรียกใช้ Chrome โดยไม่เปิดและออกหลังจากคำสั่งเสร็จสิ้น
  • --screenshotจะจับภาพหน้าจอ (โปรดทราบว่าจะสร้างไฟล์ที่เรียกว่าscreenshot.pngในโฟลเดอร์ที่รันคำสั่ง)
  • --window-sizeอนุญาตให้จับเฉพาะบางส่วนของหน้าจอ (รูปแบบคือ--window-size=width,height)
  • --default-background-color=0เป็นเคล็ดลับมายากลที่บอกให้ Chrome ใช้พื้นหลังโปร่งใสไม่ใช่สีขาวเริ่มต้น
  • ในที่สุดคุณก็ให้ไฟล์ html (เป็น url ท้องถิ่นหรือระยะไกล ... )

1
ดีมาก! มันใช้งานได้กับ SVG ด้วย! ฉันเปลี่ยนไปใช้วิธีแก้ปัญหาของคุณในที่สุด! ;-)
Martin Delille

1
--screenshot='absolute\path\of\screenshot.png'ทำงานให้ฉัน
palash

ทำงานร่วมกันกับสาย หากฉันต้องการเรียกใช้โปรแกรมนี้จาก express js วิธีการใช้งาน
สูตร Squapl

FYI ยังใช้งานได้กับโครเมียมแม้ว่ามันจะไม่พูดถึงตัวเลือกในหน้าคน
Robin Lashof-Regas

svg ไม่ใช่ svg สำหรับฉัน ... มันเป็นเพียง PNG ที่มีนามสกุล SVG ... ดังนั้นระวัง
kristopolous

97

ใช่. HTML2Canvasมีอยู่เพื่อแสดง HTML บน<canvas>(ซึ่งคุณสามารถใช้เป็นรูปภาพได้)

หมายเหตุ: มีปัญหาที่ทราบอยู่ว่าจะไม่ทำงานกับ SVG


ดูเหมือนว่าน่าสนใจ แต่ฉันไม่ได้จัดการเพื่อให้มันทำงานได้ดังนั้นฉันจึงเลือกวิธีการแก้ปัญหาของ John Fisher ขอบคุณสำหรับข้อมูลฉันจะดูโครงการนี้ในอนาคต!
Martin Delille

@MartinDelille: นี่คือบทความของการใช้ HTML2Canvas เพื่อสร้าง IMAGE และคุณสามารถดาวน์โหลดได้ที่ฝั่งไคลเอ็นต์ codepedia.info/2016/02/...
Satinder singh

3
dom-to-image (ดูคำตอบของ tsayen) ทำงานได้ดีกว่ามากในการแสดงภาพที่แม่นยำ
JBE

3
วิธีนี้ช้ามาก
hamboy75

3
ปัญหาอื่นหากองค์ประกอบถูกซ่อนอยู่หรืออยู่ด้านหลังองค์ประกอบอื่นจะไม่ทำงาน
Yousef

91

ฉันขอแนะนำห้องสมุดdom-to-imageที่เขียน แต่เพียงผู้เดียวเพื่อแก้ไขปัญหานี้ (ฉันเป็นผู้ดูแล)
นี่คือวิธีการใช้งานของคุณ (เพิ่มเติมที่นี่ ):

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

2
มันเยี่ยมมาก! วิธีใดที่จะเพิ่มขนาดเอาต์พุตเป็นสองเท่า?
cronoklee

ขอบคุณ! แต่คุณหมายถึงอะไรโดย "เพิ่มขนาดเป็นสองเท่า"
tsayen

2
สิ่งแรกที่อยู่ในใจของฉัน - พยายามที่จะทำให้ภาพของคุณเป็น SVG (โดยใช้domtoimage.toSvg) จากนั้นแสดงภาพของคุณเองบนผ้าใบและลองเล่นด้วยความละเอียดของผ้าใบนั้น อาจเป็นไปได้ที่จะใช้คุณสมบัติเช่นตัวเลือกการแสดงผลบางอย่างใน lib เองดังนั้นคุณสามารถส่งผ่านขนาดภาพเป็นพิกเซล หากคุณต้องการฉันขอขอบคุณที่คุณสร้างปัญหาใน GitHub
tsayen

8
นี่ดีกว่า html2canvas มาก ขอบคุณ
c.hughes

1
@Subho มันเป็นสตริงที่มี URL พร้อมข้อมูลพื้นฐานที่เข้ารหัส
64

66

มีตัวเลือกมากมายและพวกเขาล้วนมีข้อดีและข้อเสีย

ตัวเลือก 1: ใช้หนึ่งในไลบรารีที่มีอยู่มากมาย

ข้อดี

  • การแปลงค่อนข้างเร็วเวลาส่วนใหญ่

จุดด้อย

  • การเรนเดอร์ไม่ถูกต้อง
  • ห้ามเรียกใช้จาวาสคริปต์
  • ไม่รองรับคุณสมบัติเว็บล่าสุด (FlexBox, ตัวเลือกขั้นสูง, Webfonts, การปรับขนาดกล่อง, การค้นหาสื่อ, ... )
  • บางครั้งไม่ง่ายต่อการติดตั้ง
  • ซับซ้อนยิ่งขึ้น

ตัวเลือกที่ 2: ใช้ PhantomJs และอาจเป็น wrapper library

  • PhantomJs
  • node-webshot (ไลบรารีจาวาสคริปต์ wrapper สำหรับ PhantomJs)
  • ...

ข้อดี

  • ดำเนินการ Javascript
  • ค่อนข้างเร็ว

จุดด้อย

  • การเรนเดอร์ไม่ถูกต้อง
  • ไม่รองรับคุณสมบัติเว็บล่าสุด (FlexBox, ตัวเลือกขั้นสูง, Webfonts, การปรับขนาดกล่อง, การค้นหาสื่อ, ... )
  • ซับซ้อนยิ่งขึ้น
  • ไม่ใช่เรื่องง่ายที่จะทำให้มันทำงานถ้ามีภาพที่จะโหลด ...

ตัวเลือก 3: ใช้ Chrome Headless และอาจเป็นไลบรารีของ wrapper

ข้อดี

  • ดำเนินการ Javascript
  • ใกล้เคียงการเรนเดอร์ที่สมบูรณ์แบบ

จุดด้อย

  • ไม่ใช่เรื่องง่ายที่จะมีผลลัพธ์ที่ต้องการอย่างแท้จริงเกี่ยวกับ:
    • เวลาโหลดหน้า
    • ขนาดวิวพอร์ต
  • ซับซ้อนยิ่งขึ้น
  • ค่อนข้างช้าและช้าลงหาก html มีลิงก์ภายนอก

ตัวเลือก 4: ใช้ API

ข้อดี

  • ดำเนินการ Javascript
  • ใกล้เคียงการเรนเดอร์ที่สมบูรณ์แบบ
  • เร็วเมื่อใช้ตัวเลือกแคชอย่างถูกต้อง
  • สเกลถูกจัดการโดย API
  • เวลาที่แม่นยำ, วิวพอร์ต, ...
  • ส่วนใหญ่พวกเขาเสนอแผนฟรี

จุดด้อย

  • ไม่ฟรีถ้าคุณวางแผนที่จะใช้พวกเขามาก

การเปิดเผยข้อมูล: ฉันเป็นผู้ก่อตั้ง ApiFlash ผมทำดีที่สุดของฉันที่จะให้คำตอบที่ซื่อสัตย์และมีประโยชน์


2
ขอบคุณสำหรับคำตอบโดยละเอียดพร้อมวิธีแก้ปัญหาที่เป็นไปได้มากมาย
bszom

wkhtmltoimage / pdf รองรับการแสดงผล javascript คุณสามารถตั้งค่าการหน่วงเวลาจาวาสคริปต์หรือปล่อยให้ wkhtml ตรวจสอบ specifc window.status (ซึ่งคุณสามารถตั้งค่าด้วยจาวาสคริปต์เมื่อคุณรู้ว่าสิ่งที่ js ของคุณทำ)
Daniel Z.

PhantomJS รองรับสิ่งที่มีชีวิตชีวาเช่น Google Maps มันเป็นเว็บเบราว์เซอร์เต็มรูปแบบโดยไม่ต้องมีจอแสดงผล อย่างไรก็ตามคุณต้องรอสักครู่เพื่อให้ Google Map โหลดแผ่นงานด้วยภูมิศาสตร์ (ฉันรอ 500ms และอนุญาตให้ผู้คนเปลี่ยนการหน่วงเวลา - ถ้ามันไม่เพียงพอการทำงานอีกครั้งโดยไม่เพิ่มเวลาก็ดีเพราะไพ่เหล่านั้นถูกแคช)
Ladislav Zima

50

ทุกคำตอบที่นี่ใช้ห้องสมุดของบุคคลที่สามในขณะที่การแสดงผล HTML เพื่อภาพที่ได้ค่อนข้างง่ายใน Javascript บริสุทธิ์ มีเป็นได้แม้บทความเกี่ยวกับเรื่องนี้ในส่วนผ้าใบบน MDN

เคล็ดลับคือ:

  • สร้าง SVG ด้วยโหนด foreignObject ที่มี XHTML ของคุณ
  • ตั้งค่า src ของรูปภาพเป็น data url ของ SVG นั้น
  • drawImage ลงบนผืนผ้าใบ
  • ตั้งค่าข้อมูลผ้าใบเป็นเป้าหมาย 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()
}

บางสิ่งที่ควรทราบ

  • HTML ภายใน SVG ต้องเป็น XHTML
  • เพื่อเหตุผลด้านความปลอดภัย SVG ในฐานะ data url ของรูปภาพทำหน้าที่เป็นขอบเขต CSS ที่แยกได้สำหรับ HTML เนื่องจากไม่สามารถโหลดแหล่งข้อมูลภายนอกได้ ดังนั้นตัวอักษร Google เช่นจะต้องมีการ inlined ใช้เครื่องมือเช่นนี้
  • แม้ว่า HTML ภายใน SVG จะมีขนาดเกินกว่าขนาดของภาพมันก็จะวาดลงบนผืนผ้าใบอย่างถูกต้อง แต่ความสูงที่แท้จริงไม่สามารถวัดได้จากภาพที่ โซลูชันความสูงคงที่จะทำงานได้ดี แต่ความสูงแบบไดนามิกต้องใช้งานอีกเล็กน้อย วิธีที่ดีที่สุดคือการเรนเดอร์ข้อมูล SVG ให้เป็น iframe (สำหรับขอบเขต CSS แบบแยก) และใช้ขนาดผลลัพธ์สำหรับ Canvas

ดี! การลบการอ้างอิงห้องสมุดภายนอกเป็นวิธีที่ดีในการไป ฉันเปลี่ยนคำตอบที่ยอมรับได้ :-)
Martin Delille

บทความที่ไม่ได้อยู่ที่นั่น
MSC

2
คำตอบที่ยอดเยี่ยม แต่การแสดงความคิดเห็นเกี่ยวกับสถานะของ HTML และ Web APIs ซึ่งตามปกติดูเหมือนว่ามีบางสิ่งบางอย่างถูกดึงออกมาบางคน - การทำงานทั้งหมดนั้นโดยทางเทคนิคแล้วมีการเปิดเผยอยู่ด้านหลังอาร์เรย์ ไม่มีความชัดเจนใด ๆ ที่คุณคาดหวังจาก API ที่ออกแบบมาอย่างดี ใน Plainspeak: เป็นไปได้ยากที่เบราว์เซอร์จะอนุญาตให้ a Documentกลายเป็น raster (เช่น a Canvas), แต่เนื่องจากไม่มีใครใส่ใจที่จะทำให้มันเป็นมาตรฐานเราจึงต้องใช้ความวิกลจริตเหมือนภาพประกอบด้านบน รหัส).
AMN

1
คำตอบนี้stackoverflow.com/questions/12637395/...ดูเหมือนจะบอกคุณสามารถไปค่อนข้างไกล Mozilla และ Chrome มีข้อมูลไม่ จำกัด จำนวนและแม้แต่ IE ปัจจุบันก็อนุญาตให้ 4GB ซึ่งจะลดลงเหลือประมาณ 3GB รูปภาพ (เนื่องจาก base64) แต่นี่จะเป็นสิ่งที่ดีในการทดสอบ
Sjeiti

3
- การทดสอบที่รวดเร็วและสกปรกในภายหลัง - jsfiddle.net/Sjeiti/pcwudrmc/75965 Chrome, Edge และ Firefox ขึ้นไปที่ความสูงความกว้างอย่างน้อย 10,000 พิกเซลซึ่ง (ในกรณีนี้) คือจำนวนตัวอักษรประมาณ 10,000,000 และขนาดไฟล์ png 8MB ยังไม่ได้ทดสอบอย่างเข้มงวด แต่เพียงพอสำหรับการใช้งานส่วนใหญ่
Sjeiti

13

คุณสามารถใช้PhantomJSซึ่งเป็น webkit ที่ไม่มีหัว (โปรแกรมเรนเดอร์ในซาฟารีและโครเมียม (จนถึงล่าสุด)) คุณสามารถเรียนรู้วิธีการทำจับภาพหน้าจอของหน้าเว็บที่นี่ หวังว่าจะช่วย!


เทคนิคนี้ใช้ได้ดี อย่างไรก็ตาม 2 ปีผ่านไปตั้งแต่ความคิดเห็นของคุณ คุณเจอสิ่งที่ทำงานเร็วกว่า PhantomJS หรือไม่? การสร้างภาพโดยทั่วไปใช้เวลา 2-5 วินาทีใน Phantom จากประสบการณ์ของฉัน
Brian Webster

Chrome ที่ไม่มีส่วนหัวสามารถใช้งานได้แล้ว ฉันไม่รู้ว่ามันเร็วกว่านี้หรือไม่ แต่ถ้าคุณต้องการภาพหน้าจอที่แม่นยำนี่เป็นวิธีที่ดีที่จะไป
Josh Maag

11

คุณสามารถใช้เครื่องมือ HTML เป็น PDF เช่น wkhtmltopdf จากนั้นคุณสามารถใช้เครื่องมือ PDF เพื่อรูปภาพเช่น imagemagick เป็นที่ยอมรับว่าเป็นฝั่งเซิร์ฟเวอร์และเป็นกระบวนการที่ซับซ้อนมาก ...


12
หรือคุณสามารถเรียกใช้ภาพพี่ชายของ wkhtmltopdf wkhtmltoimage
Roman Starkov

1
Node.jsห้องสมุดนี้สำหรับ ส่วนหน้าง่าย ๆ ?

9

ห้องสมุดเดียวที่ฉันต้องทำงานกับ Chrome, Firefox และ MS Edge คือrasterizeHTML rasterizeHTMLมันให้คุณภาพที่ดีกว่า HTML2Canvas และยังคงรองรับ HTML2Canvas

รับองค์ประกอบและดาวน์โหลดเป็น 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);
            }
     });

2
แต่มันไม่ทำงานกับ IE rasterizeHTML ข้อ จำกัด
Boban Stojanovski

@vabanagas มีไฟล์จาวาสคริปต์ไว้สำหรับสิ่งนี้หรือไม่?
Mahdi Khalili

การเปลี่ยนแปลงนี้ช่วยฉันได้มาก: rasterizeHTML.drawHTML(node.innerHTML, canvas) โปรดทราบว่าฉันกำลังเรียก innerHTML บนโหนด
Sep GH

5

ใช้html2canvasเพียงแค่รวมปลั๊กอินและวิธีการโทรเพื่อแปลง HTML เป็น Canvas จากนั้นดาวน์โหลดเป็นรูปภาพ 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();
        });

ที่มา : http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/


4

ฉันไม่คาดหวังว่าสิ่งนี้จะเป็นคำตอบที่ดีที่สุด แต่มันก็น่าสนใจพอที่จะโพสต์

เขียนแอปที่เปิดเบราว์เซอร์ที่คุณชื่นชอบไปยังเอกสาร HTML ที่ต้องการปรับขนาดหน้าต่างให้เหมาะสมและถ่ายหน้าจอ จากนั้นเอาเส้นขอบของภาพ


4

ใช้รหัสนี้มันจะทำงานอย่างแน่นอน:

<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 ในโปรแกรมของคุณด้วย https://html2canvas.hertzen.com/dist/html2canvas.js


2

คุณไม่สามารถทำสิ่งนี้ได้อย่างแม่นยำ 100% โดยใช้ JavaScript เพียงอย่างเดียว

มี Qt Webkit เป็นเครื่องมือออกมีและรุ่นหลาม หากคุณต้องการทำด้วยตัวเองฉันประสบความสำเร็จกับ 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];
}];

หวังว่านี่จะช่วยได้!


คุณมีเวอร์ชันด้านบนอย่างรวดเร็วหรือไม่? หรือถ้าเป็นไปได้โปรดเขียนใหม่ได้ไหม?
ssh

คุณต้องการแบ่งปันรหัสที่คุณใช้ในการโหลด webView ที่คุณกำลังแสดงหรือไม่ ดูเหมือนว่าวิธีการที่เหมาะสมสำหรับโปรแกรมแสดงภาพย่อของฉัน ขอบคุณ!
เดฟ

1

ติดตั้ง phantomjs

$ npm install phantomjs

สร้างไฟล์ github.js ด้วยรหัสต่อไปนี้

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

ส่งไฟล์เป็นอาร์กิวเมนต์ไปยัง phantomjs

$ phantomjs github.js


-3

คุณสามารถเพิ่ม HtmlRenderer อ้างอิงให้กับโครงการของคุณและทำดังต่อไปนี้

string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.