वहाँ PNG की तरह छवि के लिए HTML रेंडर करने के लिए एक रास्ता है? मुझे पता है कि यह कैनवास के साथ संभव है, लेकिन मैं उदाहरण के लिए div जैसे मानक html तत्व प्रस्तुत करना चाहूंगा।
वहाँ PNG की तरह छवि के लिए HTML रेंडर करने के लिए एक रास्ता है? मुझे पता है कि यह कैनवास के साथ संभव है, लेकिन मैं उदाहरण के लिए div जैसे मानक html तत्व प्रस्तुत करना चाहूंगा।
जवाबों:
मुझे पता है कि यह एक बहुत पुराना सवाल है, जिसके पहले से ही बहुत सारे जवाब हैं, फिर भी मैं अभी भी घंटों बिता रहा हूं जो वास्तव में मैं चाहता था:
क्रोम हेडलेस का उपयोग करना (इस प्रतिक्रिया के रूप में संस्करण 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
वह मैजिक ट्रिक है जो क्रोम को पारदर्शी पृष्ठभूमि का उपयोग करने के लिए कहता है , न कि डिफ़ॉल्ट सफेद रंग का--screenshot='absolute\path\of\screenshot.png'
मेरे लिए काम किया
हाँ। HTML2Canvas HTML को रेंडर करने के लिए मौजूद है <canvas>
(जिसे आप तब इमेज के रूप में इस्तेमाल कर सकते हैं)।
नोट: एक ज्ञात समस्या है, कि यह SVG के साथ काम नहीं करेगा
क्या मैं डोम-टू-इमेज लाइब्रेरी की सिफारिश कर सकता हूं , जिसे पूरी तरह से इस समस्या (मैं अनुचर हूं) को संबोधित करने के लिए लिखा गया था।
यहां बताया गया है कि आप इसका उपयोग कैसे करते हैं (कुछ और यहां ):
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);
});
domtoimage.toSvg
) में रेंडर करने की कोशिश करें , फिर खुद को कैनवास पर रेंडर करें और किसी तरह उस कैनवास के रिज़ॉल्यूशन से खेलने की कोशिश करें। यह संभव है कि इस तरह की सुविधा को केवल लिबास में किसी प्रकार के रेंडरिंग विकल्प के रूप में लागू करना संभव है, इसलिए आप पिक्सेल में छवि आयाम पास कर सकते हैं। यदि आपको इसकी आवश्यकता है, तो मैं आपको जीथब पर एक मुद्दा बनाने की सराहना करूंगा।
बहुत सारे विकल्प हैं और वे सभी अपने समर्थक और विपक्ष हैं।
पेशेवरों
विपक्ष
पेशेवरों
विपक्ष
पेशेवरों
विपक्ष
पेशेवरों
विपक्ष
प्रकटीकरण: मैं ApiFlash का संस्थापक हूं। मैंने एक ईमानदार और उपयोगी उत्तर देने की पूरी कोशिश की।
यहां सभी उत्तर तृतीय पक्ष पुस्तकालयों का उपयोग करते हैं, जबकि एक छवि को HTML प्रदान करना शुद्ध जावास्क्रिप्ट में अपेक्षाकृत सरल हो सकता है। वहाँ है भी था इसके बारे में एक लेख MDN पर कैनवास खंड पर।
चाल यह है:
drawImage
कैनवास पर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()
}
ध्यान देने योग्य कुछ बातें
Document
रास्टर (जैसे Canvas
) में प्रस्तुत करने की अनुमति देने के लिए यह सबसे अधिक संभावना है , लेकिन क्योंकि कोई भी इसे मानकीकृत करने की जहमत नहीं उठाता है, हमें ऊपर बताए गए उदाहरणों की तरह पागलपन का सहारा लेना होगा (इस पर लेखक का कोई अपराध नहीं) कोड)।
आप PhantomJS का उपयोग कर सकते हैं , जो एक हेडलेस वेबकिट (सफारी में रेंडरिंग इंजन और हाल ही में क्रोम तक) ड्राइवर है। आप यहां पृष्ठों की स्क्रीन कैप्चर करना सीख सकते हैं । उम्मीद है की वो मदद करदे!
आप wkhtmltopdf जैसे HTML से पीडीएफ टूल का उपयोग कर सकते हैं। और फिर आप एक पीडीएफ का उपयोग कर सकते हैं जैसे छवि उपकरण छवि इमेजिक। बेशक यह सर्वर साइड है और एक बहुत ही जटिल प्रक्रिया है ...
Node.js
। कैसे सरल दृश्य के बारे में?
क्रोम, फ़ायरफ़ॉक्स और एमएस एज के लिए काम करने वाली एकमात्र लाइब्रेरी 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);
}
});
rasterizeHTML.drawHTML(node.innerHTML, canvas)
ध्यान दें कि Im ने नोड पर इनर HTML को कॉल किया है
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/
इस कोड का उपयोग करें, यह निश्चित रूप से काम करेगा:
<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
आप अकेले जावास्क्रिप्ट के साथ यह 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];
}];
उम्मीद है की यह मदद करेगा!
प्रेत स्थापित करें
$ 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
HtmlToImage.jar एक HTML को इमेज में बदलने का सबसे सरल तरीका होगा
आप अपनी परियोजना में संदर्भ HtmlRenderer जोड़ सकते हैं और निम्नलिखित कर सकते हैं,
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));