HTML को किसी इमेज में रेंडर करें


167

वहाँ PNG की तरह छवि के लिए HTML रेंडर करने के लिए एक रास्ता है? मुझे पता है कि यह कैनवास के साथ संभव है, लेकिन मैं उदाहरण के लिए div जैसे मानक html तत्व प्रस्तुत करना चाहूंगा।


उदाहरण के लिए, किसी प्रकार की उपयोगकर्ता सहायता बनाना। अफसोस की बात है, यह संभव नहीं है (सुरक्षा कारणों से?)। आपको उपयोगकर्ता से कुछ करने के लिए PrintScreen को दबाने के लिए कहना होगा।
मैक्सआर्ट


मैं लोगो डिजाइन करने के लिए HTML / CSS का उपयोग करना चाहता हूं।
मार्टिन डेलिले

4
@ अर्नेस्टफ्रीडमैन-हिल एक डुप्लिकेट नहीं है: आपके द्वारा उल्लिखित प्रश्न जावा के लिए विशिष्ट है।
मार्टिन डेलिले

HTML को IMAGE png या jpeg फॉर्मेट codepedia.info/2016/02// पर
singh

जवाबों:


42

मुझे पता है कि यह एक बहुत पुराना सवाल है, जिसके पहले से ही बहुत सारे जवाब हैं, फिर भी मैं अभी भी घंटों बिता रहा हूं जो वास्तव में मैं चाहता था:

  • एक html फ़ाइल दी, कमांड लाइन से पारदर्शी पृष्ठभूमि के साथ एक (png) छवि उत्पन्न करें

क्रोम हेडलेस का उपयोग करना (इस प्रतिक्रिया के रूप में संस्करण 74.0.3729.157), यह वास्तव में आसान है:

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

आदेश की व्याख्या:

  • आप कमांड लाइन से क्रोम चलाते हैं (यहाँ मैक के लिए दिखाया गया है, लेकिन विंडोज या लिनक्स पर समान है)
  • --headless क्रोम इसे बिना खोले चलाता है और कमांड पूरा होने के बाद बाहर निकलता है
  • --screenshotस्क्रीनशॉट कैप्चर करेगा (ध्यान दें कि यह screenshot.pngउस फ़ोल्डर में नामक एक फ़ाइल उत्पन्न करता है जहां कमांड चलाया जाता है)
  • --window-sizeकेवल स्क्रीन के एक हिस्से को पकड़ने की अनुमति दें (प्रारूप है --window-size=width,height)
  • --default-background-color=0वह मैजिक ट्रिक है जो क्रोम को पारदर्शी पृष्ठभूमि का उपयोग करने के लिए कहता है , न कि डिफ़ॉल्ट सफेद रंग का
  • अंत में आप html फ़ाइल प्रदान करते हैं (एक url के रूप में स्थानीय या दूरस्थ ...)

1
बहुत अच्छा! यह SVG के साथ भी काम करता है! मैं अंत में अपने समाधान के लिए बंद कर दिया! ;-)
मार्टिन डेलिले जू

1
--screenshot='absolute\path\of\screenshot.png'मेरे लिए काम किया
पलाश

कामन रेखा ने काम किया। अगर मैं एक्सप्रेस जीएस से इसे प्रोग्रामिक रूप से चलाना चाहता हूं तो इसे कैसे चलाना है?
स्क्वापल रेसिपी

FYI करें यह क्रोमियम के साथ भी काम करता है, हालांकि यह मैन पेज में विकल्प का उल्लेख नहीं करता है।
रॉबिन लैशोफ-रेगास

इस svg मेरे लिए एक svg नहीं है ... यह सिर्फ एक SVG विस्तार के साथ एक PNG है ... तो बाहर देखो।
kristopolous

97

हाँ। HTML2Canvas HTML को रेंडर करने के लिए मौजूद है <canvas>(जिसे आप तब इमेज के रूप में इस्तेमाल कर सकते हैं)।

नोट: एक ज्ञात समस्या है, कि यह SVG के साथ काम नहीं करेगा


यह दिलचस्प लगता है, लेकिन मैंने इसे बनाने का प्रबंधन नहीं किया इसलिए मैं जॉन फिशर समाधान चुनता हूं। जानकारी के लिए धन्यवाद, मैं भविष्य में इस परियोजना को देखूंगा!
मार्टिन डेलिले

@MartinDelille: यहाँ IMAGE बनाने के लिए HTML2Canvas का उपयोग करने का एक लेख दिया गया है और आप इसे क्लाइंट साइड कोडपीडिया.info
सिंह

3
डोम-टू-इमेज (देखें tsayen का जवाब) एक सटीक तस्वीर को प्रस्तुत करने के लिए बहुत बेहतर काम करता है।
जेबीई

3
यह समाधान बहुत धीमा है
hamboy75

3
एक और मुद्दा, अगर तत्व छिपा हुआ है या किसी अन्य तत्व के पीछे यह काम नहीं करेगा
Yousef

91

क्या मैं डोम-टू-इमेज लाइब्रेरी की सिफारिश कर सकता हूं , जिसे पूरी तरह से इस समस्या (मैं अनुचर हूं) को संबोधित करने के लिए लिखा गया था।
यहां बताया गया है कि आप इसका उपयोग कैसे करते हैं (कुछ और यहां ):

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
यह भी खूब रही! उत्पादन का आकार दोगुना करने का कोई तरीका?
क्रोनोकली

धन्यवाद! लेकिन वास्तव में "आकार को दोगुना करने" से आपका क्या मतलब है?
tsayen

2
पहली बात जो मेरे दिमाग में आती है - अपनी छवि को एसवीजी (उपयोग करते हुए domtoimage.toSvg) में रेंडर करने की कोशिश करें , फिर खुद को कैनवास पर रेंडर करें और किसी तरह उस कैनवास के रिज़ॉल्यूशन से खेलने की कोशिश करें। यह संभव है कि इस तरह की सुविधा को केवल लिबास में किसी प्रकार के रेंडरिंग विकल्प के रूप में लागू करना संभव है, इसलिए आप पिक्सेल में छवि आयाम पास कर सकते हैं। यदि आपको इसकी आवश्यकता है, तो मैं आपको जीथब पर एक मुद्दा बनाने की सराहना करूंगा।
tsayen

8
यह html2canvas से बेहतर है। धन्यवाद।
c.hughes

1
@Subho यह एक स्ट्रिंग है जिसमें बेस 64-एन्कोडेड डेटा वाला URL है
tsayen

66

बहुत सारे विकल्प हैं और वे सभी अपने समर्थक और विपक्ष हैं।

विकल्प 1: कई उपलब्ध पुस्तकालयों में से एक का उपयोग करें

पेशेवरों

  • अधिकांश समय रूपांतरण काफी तेज़ होता है

विपक्ष

  • बुरा प्रतिपादन
  • जावास्क्रिप्ट को निष्पादित नहीं करता है
  • हाल की वेब सुविधाओं के लिए कोई समर्थन नहीं (FlexBox, उन्नत चयनकर्ता, Webfonts, बॉक्स साइज़िंग, मीडिया क्वेरी, ...)
  • कभी-कभी स्थापित करना इतना आसान नहीं होता है
  • पैमाने पर जटिल

विकल्प 2: फैंटमज और संभवतया एक रैपर लाइब्रेरी का उपयोग करें

पेशेवरों

  • जावास्क्रिप्ट को निष्पादित करें
  • जल्दी

विपक्ष

  • बुरा प्रतिपादन
  • हाल की वेब सुविधाओं के लिए कोई समर्थन नहीं (FlexBox, उन्नत चयनकर्ता, Webfonts, बॉक्स साइज़िंग, मीडिया क्वेरी, ...)
  • पैमाने पर जटिल
  • इतना आसान नहीं है कि इसे काम करने के लिए अगर छवियों को लोड करना है ...

विकल्प 3: क्रोम हेडलेस और शायद एक रैपर लाइब्रेरी का उपयोग करें

पेशेवरों

  • जावास्क्रिप्ट को निष्पादित करें
  • सही प्रतिपादन के पास

विपक्ष

  • के बारे में वास्तव में वांछित परिणाम होना इतना आसान नहीं है:
    • पृष्ठ लोड समय
    • व्यूपोर्ट आयाम
  • पैमाने पर जटिल
  • अगर html में बाहरी लिंक हैं तो धीमी और धीमी

विकल्प 4: एक एपीआई का उपयोग करें

पेशेवरों

  • जावास्क्रिप्ट को निष्पादित करें
  • सही प्रतिपादन के पास
  • तेजी से जब कैशिंग विकल्प सही तरीके से उपयोग किए जाते हैं
  • स्केल एपीआई द्वारा नियंत्रित किया जाता है
  • सटीक समय, व्यूपोर्ट, ...
  • ज्यादातर समय वे एक मुफ्त योजना की पेशकश करते हैं

विपक्ष

  • यदि आप उन्हें बहुत उपयोग करने की योजना नहीं बनाते हैं तो मुक्त नहीं हैं

प्रकटीकरण: मैं ApiFlash का संस्थापक हूं। मैंने एक ईमानदार और उपयोगी उत्तर देने की पूरी कोशिश की।


2
बहुत सारे संभावित समाधानों के साथ एक विस्तृत जवाब के लिए धन्यवाद
bszom

wkhtmltoimage / pdf जावास्क्रिप्ट रेंडरिंग का समर्थन करता है। आप एक जावास्क्रिप्ट देरी निर्धारित कर सकते हैं या एक विशेष विंडो के लिए wkhtml जाँच कर सकते हैं। स्टैटस (जिसे आप जावास्क्रिप्ट के साथ सेट कर सकते हैं जब आपको पता हो कि आपका js सामान हो चुका है)
डैनियल जेड।

फैंटमज गूगल मैप्स की तरह गतिशील सामान का समर्थन करता है। यह वास्तव में एक पूर्ण वेब ब्राउज़र है, सिर्फ एक डिस्प्ले संलग्न किए बिना। हालाँकि, आपको भूगोल के साथ टाइलें लोड करने के लिए Google मानचित्र के लिए थोड़ा इंतजार करना होगा (मैं 500ms प्रतीक्षा करता हूं और लोगों को देरी को बदलने की अनुमति देता हूं - यदि यह पर्याप्त नहीं है, तो समय बढ़ाने के बिना फिर से चलना ठीक है, क्योंकि उन टाइलों को कैश किया गया है)।
लादिस्लाव जिमा

50

यहां सभी उत्तर तृतीय पक्ष पुस्तकालयों का उपयोग करते हैं, जबकि एक छवि को HTML प्रदान करना शुद्ध जावास्क्रिप्ट में अपेक्षाकृत सरल हो सकता है। वहाँ है भी था इसके बारे में एक लेख MDN पर कैनवास खंड पर।

चाल यह है:

  • अपने एक्सएचटीएमएल वाले फॉरेनऑबजेक्ट नोड के साथ एक एसवीजी बनाएं
  • उस SVG के डेटा url में एक छवि का src सेट करें
  • 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()
}

ध्यान देने योग्य कुछ बातें

  • SVG के अंदर HTML को XHTML होना चाहिए
  • सुरक्षा कारणों से एसवीजी एक छवि के डेटा यूआरएल के रूप में HTML के लिए एक अलग सीएसएस गुंजाइश के रूप में कार्य करता है क्योंकि कोई बाहरी स्रोत लोड नहीं किया जा सकता है। उदाहरण के लिए एक Google फ़ॉन्ट को इस तरह एक उपकरण का उपयोग करके इनलाइन किया जाना है ।
  • यहां तक ​​कि जब एसवीजी के अंदर का HTML छवि के आकार को पार कर जाता है, तो वह कैनवस पर सही ढंग से आकर्षित होता है। लेकिन वास्तविक ऊंचाई को उस छवि से नहीं मापा जा सकता है। एक निश्चित ऊंचाई समाधान ठीक काम करेगा लेकिन गतिशील ऊंचाई को थोड़ा और काम करने की आवश्यकता होगी। सबसे अच्छा है SVG डेटा को एक iframe (पृथक CSS दायरे के लिए) में रेंडर करना और कैनवास के लिए परिणामी आकार का उपयोग करना।

अच्छा! बाहरी पुस्तकालय निर्भरता को हटाना वास्तव में जाने का अच्छा तरीका है। मैंने अपना स्वीकृत उत्तर :-)
मार्टिन डेलिले

वह लेख अब नहीं है।
एमएससी

2
महान जवाब, लेकिन HTML और वेब एपीआई की कला की स्थिति पर टिप्पणी करते हुए, जो हमेशा की तरह दिखता है कि किसी ने किसी को पीछे खींच लिया है - सभी कार्यक्षमता तकनीकी रूप से है, लेकिन अजीब कोड पथों के एक सरणी (कोई उद्देश्य नहीं) के पीछे उजागर होता है जो समान होते हैं स्पष्ट रूप से डिज़ाइन किए गए API से आपको किसी भी प्रकार की स्पष्टता की उम्मीद नहीं होगी। प्लेनस्पीक में: किसी ब्राउज़र को Documentरास्टर (जैसे Canvas) में प्रस्तुत करने की अनुमति देने के लिए यह सबसे अधिक संभावना है , लेकिन क्योंकि कोई भी इसे मानकीकृत करने की जहमत नहीं उठाता है, हमें ऊपर बताए गए उदाहरणों की तरह पागलपन का सहारा लेना होगा (इस पर लेखक का कोई अपराध नहीं) कोड)।
एमएन

1
यह उत्तर stackoverflow.com/questions/12637395/… लगता है कि आप काफी दूर तक जा सकते हैं। मोज़िला और क्रोम में अनलिमिटेड डेटा यूरी लैंथ है और यहां तक ​​कि वर्तमान आईई 4 जीबी की अनुमति देता है, जो लगभग 3 जीबी छवियों (बेस 64 के कारण) को उबालता है। लेकिन यह परीक्षण के लिए एक अच्छी बात होगी।
सजेती

3
- कुछ त्वरित और गंदे परीक्षण बाद में - jsfiddle.net/Sjeiti/pcwudrmc/75965 क्रोम, एज और फ़ायरफ़ॉक्स कम से कम 10,000 पिक्सेल की चौड़ाई की ऊँचाई तक जाते हैं जो (इस मामले में) लगभग 10,000,000 की वर्ण गणना है और एक png फाइल का आकार 8MB का। कठोरता से परीक्षण नहीं किया गया, लेकिन यह अधिकांश उपयोग के मामलों के लिए पर्याप्त है।
सिजिती

13

आप PhantomJS का उपयोग कर सकते हैं , जो एक हेडलेस वेबकिट (सफारी में रेंडरिंग इंजन और हाल ही में क्रोम तक) ड्राइवर है। आप यहां पृष्ठों की स्क्रीन कैप्चर करना सीख सकते हैं । उम्मीद है की वो मदद करदे!


यह तकनीक अच्छी तरह से काम करती है। हालाँकि, आपकी टिप्पणी को 2 साल बीत चुके हैं। क्या आप ऐसी किसी भी चीज़ के बारे में जानते हैं जो फैंटमज की तुलना में अधिक तेज़ी से चल रही है? छवि निर्माण में आमतौर पर मेरे अनुभव में प्रेत में 2-5 सेकंड लगते हैं।
ब्रायन वेबस्टर

हेडलेस क्रोम अब संभव है। मुझे नहीं पता कि यह तेज़ है, लेकिन अगर आप सटीक स्क्रीनशॉट चाहते हैं, तो यह एक अच्छा तरीका है।
जोश मैग

11

आप wkhtmltopdf जैसे HTML से पीडीएफ टूल का उपयोग कर सकते हैं। और फिर आप एक पीडीएफ का उपयोग कर सकते हैं जैसे छवि उपकरण छवि इमेजिक। बेशक यह सर्वर साइड है और एक बहुत ही जटिल प्रक्रिया है ...


12
या आप बस wkhtmltopdf की छवि भाई, wkhtmltoimage चला सकते हैं।
रोमन स्टार्कोव

1
यह पुस्तकालय के लिए है Node.js। कैसे सरल दृश्य के बारे में?
व्लाद

9

क्रोम, फ़ायरफ़ॉक्स और एमएस एज के लिए काम करने वाली एकमात्र लाइब्रेरी rasterizeHTML थी । यह बेहतर गुणवत्ता का आउटपुट देता है कि HTML2Canvas और अभी भी HTML2Canvas के विपरीत समर्थित है।

पीएनजी के रूप में तत्व और डाउनलोडिंग प्राप्त करना

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 सीमाएँ
बोबन स्टोजानोव्स्की

@vabanagas क्या इसके लिए कोई एकल फ़ाइल जावास्क्रिप्ट है?
महदी खलीली

इस परिवर्तन से मुझे बहुत मदद मिली: rasterizeHTML.drawHTML(node.innerHTML, canvas) ध्यान दें कि Im ने नोड पर इनर HTML को कॉल किया है
Sep GH

5

HTML को कैनवस में बदलने के लिए html2canvas का उपयोग करें । इसमें प्लगइन और कॉल विधि को शामिल करें और फिर छवि 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% सही तरीके से नहीं कर सकते।

वहाँ एक Qt Webkit उपकरण है , और एक अजगर संस्करण है । यदि आप इसे स्वयं करना चाहते हैं, तो मुझे कोको के साथ सफलता मिली है:

[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

क्या आप उस कोड को साझा करने का मन करेंगे जिसका उपयोग आप उस वेब दृश्य को लोड करने के लिए कर रहे हैं जिसे आप प्रस्तुत कर रहे हैं? यह मेरे थंबनेल रेंडरर के लिए एक आशाजनक दृष्टिकोण की तरह लगता है। धन्यवाद!
डेव

1

प्रेत स्थापित करें

$ 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 github.js


-3

आप अपनी परियोजना में संदर्भ HtmlRenderer जोड़ सकते हैं और निम्नलिखित कर सकते हैं,

string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.