পিএনজির মতো চিত্রটিতে এইচটিএমএল রেন্ডার করার কোনও উপায় আছে কি? আমি জানি যে ক্যানভাস দিয়ে এটি সম্ভব তবে আমি উদাহরণস্বরূপ ডিভের মতো মানক এইচটিএমএল উপাদান রেন্ডার করতে চাই।
পিএনজির মতো চিত্রটিতে এইচটিএমএল রেন্ডার করার কোনও উপায় আছে কি? আমি জানি যে ক্যানভাস দিয়ে এটি সম্ভব তবে আমি উদাহরণস্বরূপ ডিভের মতো মানক এইচটিএমএল উপাদান রেন্ডার করতে চাই।
উত্তর:
আমি জানি এটি একটি পুরানো প্রশ্ন যা ইতিমধ্যে প্রচুর উত্তর পেয়েছে, তবুও আমি এখনও যা চেয়েছিলাম তা করার চেষ্টা করার জন্য কয়েক ঘন্টা ব্যয় করেছি:
ক্রোম হেডলেস ব্যবহার করে (এই প্রতিক্রিয়া হিসাবে সংস্করণ .0৪.০.77২.১৫5), এটি আসলে সহজ:
"/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'
আমার জন্য কাজ করেছেন
হ্যাঁ. এইচটিএমএল রেকর্ড করার জন্য এইচটিএমএল 2 ক্যানভাসের উপস্থিতি রয়েছে <canvas>
(যা আপনি পরে চিত্র হিসাবে ব্যবহার করতে পারেন)।
দ্রষ্টব্য: একটি জ্ঞাত সমস্যা আছে যে এটি এসভিজির সাথে কাজ করবে না
আমি ডোম-টু-ইমেজ লাইব্রেরির সুপারিশ করতে পারি , এটি কেবল এই সমস্যার সমাধান করার জন্য লেখা হয়েছিল (আমি রক্ষণাবেক্ষণকারী)।
আপনি এটি কীভাবে ব্যবহার করবেন তা এখানে রয়েছে :
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
) রেন্ডার করার চেষ্টা করুন, তারপরে এটি নিজেকে ক্যানভাসে রেন্ডার করুন এবং কোনওভাবেই সেই ক্যানভাসের রেজোলিউশনের সাথে খেলতে চেষ্টা করুন। এই ধরনের বৈশিষ্ট্যটি সম্ভবত কিছুটা রেন্ডারিং বিকল্প হিসাবে লিব নিজেই প্রয়োগ করা সম্ভব, যাতে আপনি পিক্সেলগুলিতে চিত্রের মাত্রাটি পাস করতে পারেন। আপনার যদি এটির প্রয়োজন হয়, আমি আপনাকে গিথুবে একটি সমস্যা তৈরি করার জন্য প্রশংসা করব।
এখানে প্রচুর বিকল্প রয়েছে এবং তাদের সকলের পক্ষে প্রো ও কনস রয়েছে।
পেশাদাররা
কনস
পেশাদাররা
কনস
পেশাদাররা
কনস
পেশাদাররা
কনস
প্রকাশ: আমি এপিআইফ্ল্যাশের প্রতিষ্ঠাতা। আমি একটি সৎ এবং দরকারী উত্তর দেওয়ার জন্য যথাসাধ্য চেষ্টা করেছি।
কোনও চিত্রের এইচটিএমএল রেন্ডার করার সময় এখানে সমস্ত উত্তর তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে খাঁটি জাভাস্ক্রিপ্টে তুলনামূলক সহজ হতে পারে। সেখানে হয় এমনকি ছিল এটি সম্পর্কে একটি নিবন্ধ 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
) খুব সম্ভবত তুচ্ছ, তবে কোনওরূপী এটি মানসম্মত করতে বিরক্ত না করায় আমাদের উপরোক্ত চিত্রের মতো পাগলামির অবলম্বন করতে হবে (এটি লেখকের কোনও অপরাধ নয়) কোড)।
আপনি ফ্যান্টমজেএস ব্যবহার করতে পারেন যা একটি হেডলেস ওয়েবকিট ( সাফারিতে রেন্ডারিং ইঞ্জিন এবং (সম্প্রতি অবধি) ক্রোম) ড্রাইভার। কীভাবে পৃষ্ঠাগুলির স্ক্রিন ক্যাপচার করতে শিখতে পারি এখানে । আশা করি এইটি কাজ করবে!
আপনি wkhtmltopdf এর মতো পিডিএফ সরঞ্জামটি ব্যবহার করতে পারেন। এবং তারপরে আপনি চিত্রম্যাগিকের মতো চিত্র সরঞ্জামে একটি পিডিএফ ব্যবহার করতে পারেন। স্বীকার করা যায় এটি হ'ল সার্ভার সাইড এবং একটি অত্যন্ত সংশ্লেষিত প্রক্রিয়া ...
Node.js
। কীভাবে সরল সীমারেখা?
ক্রোম, ফায়ারফক্স এবং এমএস এজের জন্য আমি যে লাইব্রেরিটিতে কাজ করতে পেরেছি তা হ'ল রাস্টেরাইজ এইচটিএমএল । এটি HTML2 ক্যানভাসের আরও ভাল মানের আউটপুট দেয় এবং এখনও HTML2 ক্যানভাসের বিপরীতে সমর্থিত।
এলিমেন্ট পাওয়া এবং পিএনজি হিসাবে ডাউনলোড করা
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)
নোট করুন যে আমি নোডের অভ্যন্তরীণ এইচটিএমএল কল করছি
ব্যবহারের 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-docament-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>
আপনার প্রোগ্রামটিতে এইচটিএমএল 2 ক্যানভাসজেএস ফাইলটি অন্তর্ভুক্ত করতে ভুলবেন না। https://html2canvas.hertzen.com/dist/html2canvas.js
আপনি একা জাভাস্ক্রিপ্ট দিয়ে নির্ভুলভাবে এটি 100% করতে পারবেন না।
একটি Qt ওয়েবকিট সরঞ্জাম আছে এবং একটি অজগর সংস্করণ । আপনি যদি এটি নিজে করতে চান তবে আমি কোকো দিয়ে সাফল্য পেয়েছি:
[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
এইচটিএমএলটিওআইমেজ.জার হ'ল এইচটিএমএলকে একটি ছবিতে রূপান্তর করার সহজতম উপায়
আপনি আপনার প্রকল্পে এইচটিএমএল রেন্ডারার যুক্ত করতে পারেন এবং নিম্নলিখিতটি করতে পারেন,
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));