কোনও চিত্রকে এইচটিএমএল সরবরাহ করুন


167

পিএনজির মতো চিত্রটিতে এইচটিএমএল রেন্ডার করার কোনও উপায় আছে কি? আমি জানি যে ক্যানভাস দিয়ে এটি সম্ভব তবে আমি উদাহরণস্বরূপ ডিভের মতো মানক এইচটিএমএল উপাদান রেন্ডার করতে চাই।


উদাহরণস্বরূপ, একরকম ব্যবহারকারী সহায়তা তৈরি করতে। দুঃখের বিষয়, এটি সম্ভব নয় (সুরক্ষার কারণে?) আপনাকে কিছু করার জন্য আপনাকে ব্যবহারকারীকে মুদ্রণস্ক্রিন টিপতে বলতে হবে।
ম্যাক্সআর্ট


আমি লোগো ডিজাইন করতে এইচটিএমএল / সিএসএস ব্যবহার করতে চাই।
মার্টিন ডিলি

4
@ আর্নেস্টফ্রেডম্যান-হিল কোনও নকল নয়: আপনি যে প্রশ্নটি উল্লেখ করেছেন তা জাভা সম্পর্কিত।
মার্টিন ডিলি

এইচটিএমএলকে চিত্রের পিএনজি
সিংহ

উত্তর:


42

আমি জানি এটি একটি পুরানো প্রশ্ন যা ইতিমধ্যে প্রচুর উত্তর পেয়েছে, তবুও আমি এখনও যা চেয়েছিলাম তা করার চেষ্টা করার জন্য কয়েক ঘন্টা ব্যয় করেছি:

  • এইচটিএমএল ফাইল দেওয়া হয়েছে, কমান্ড লাইন থেকে স্বচ্ছ পটভূমি সহ একটি (png) চিত্র তৈরি করুন

ক্রোম হেডলেস ব্যবহার করে (এই প্রতিক্রিয়া হিসাবে সংস্করণ .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এটি সেই ম্যাজিক ট্রিক যা ক্রোমকে একটি স্বচ্ছ পটভূমি ব্যবহার করতে বলে , ডিফল্ট সাদা রঙ নয়
  • অবশেষে আপনি এইচটিএমএল ফাইল সরবরাহ করুন (স্থানীয় হিসাবে বা দূরবর্তী একটি url হিসাবে ...)

1
খুব সুন্দর! এটি এসভিজির সাথেও কাজ করে! আমি শেষ পর্যন্ত আপনার সমাধানে পরিবর্তন! ;-)
মার্টিন ডিলি

1
--screenshot='absolute\path\of\screenshot.png'আমার জন্য কাজ করেছেন
পলাশ

কম্যান লাইন কাজ করেছে। যদি আমি এক্সপ্রেস জেএস থেকে এই প্রোগ্রামোগ্রাফিকভাবে চালাতে চাই তবে এটি কীভাবে চালানো যায়?
স্কোয়াপল রেসিপি

এফওয়াইআই এটি ক্রোমিয়ামের সাথেও কাজ করে যদিও এটি ম্যান পৃষ্ঠায় বিকল্পটির উল্লেখ করে না।
রবিন ল্যাশফ-রেগাস

এসভিজি আমার জন্য কোনও এসজিজি নয় ... এটি কেবলমাত্র একটি এসভিজি এক্সটেনশন সহ একটি পিএনজি ... সুতরাং দেখুন।
ক্রিস্টোপলাস

97

হ্যাঁ. এইচটিএমএল রেকর্ড করার জন্য এইচটিএমএল 2 ক্যানভাসের উপস্থিতি রয়েছে <canvas>(যা আপনি পরে চিত্র হিসাবে ব্যবহার করতে পারেন)।

দ্রষ্টব্য: একটি জ্ঞাত সমস্যা আছে যে এটি এসভিজির সাথে কাজ করবে না


এটি আকর্ষণীয় বলে মনে হচ্ছে তবে আমি এটি কাজ করতে পরিচালিত করি না তাই আমি জন ফিশার সমাধানটি বেছে নিই। তথ্যের জন্য ধন্যবাদ, আমি এই প্রকল্পটি ভবিষ্যতে দেখব!
মার্টিন ডিলি

@ মার্টিনডিলি: এখানে চিত্র তৈরি করতে এইচটিএমএল 2 ক্যানভাস ব্যবহার করার একটি নিবন্ধ এবং আপনি এটি ক্লায়েন্ট সাইড কোডেপিডিয়া.info
সিংহ

3
ডম-টু-ইমেজ (সায়েনের উত্তর দেখুন) একটি সঠিক ছবি রেন্ডার করতে আরও অনেক ভাল কাজ করে।
জেবিই

3
এই সমাধানটি খুব ধীর
hamboy75

3
অন্য ইস্যু, যদি উপাদানটি লুকানো থাকে বা অন্য উপাদানটির পিছনে থাকে এটি কাজ করবে না
ইউসুফ

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
এটি এইচটিএমএল 2 ক্যানভাসের চেয়ে অনেক ভাল। ধন্যবাদ।
c.hughes

1
@ শুভ এটি একটি স্ট্রিং যেখানে বেস 64-
এনকোডড

66

এখানে প্রচুর বিকল্প রয়েছে এবং তাদের সকলের পক্ষে প্রো ও কনস রয়েছে।

বিকল্প 1: উপলভ্য অনেকগুলি গ্রন্থাগারের মধ্যে একটি ব্যবহার করুন

পেশাদাররা

  • বেশিরভাগ সময় রূপান্তরটি বেশ দ্রুত

কনস

  • খারাপ উপস্থাপনা
  • জাভাস্ক্রিপ্ট চালায় না
  • সাম্প্রতিক ওয়েব বৈশিষ্ট্যগুলির জন্য কোনও সমর্থন নেই (ফ্লেক্সবক্স, উন্নত নির্বাচনকারী, ওয়েবফন্টস, বক্স সাইজিং, মিডিয়া ক্যোয়ারী, ...)
  • কখনও কখনও ইনস্টল করা এত সহজ নয়
  • স্কেল জটিল

বিকল্প 2: ফ্যান্টমজে এবং সম্ভবত একটি মোড়ক লাইব্রেরি ব্যবহার করুন

পেশাদাররা

  • জাভাস্ক্রিপ্ট কার্যকর করুন
  • সম্পূর্ণ দ্রুত

কনস

  • খারাপ উপস্থাপনা
  • সাম্প্রতিক ওয়েব বৈশিষ্ট্যগুলির জন্য কোনও সমর্থন নেই (ফ্লেক্সবক্স, উন্নত নির্বাচনকারী, ওয়েবফন্টস, বক্স সাইজিং, মিডিয়া ক্যোয়ারী, ...)
  • স্কেল জটিল
  • ছবি লোড করার মতো থাকলে এটি কাজ করা এত সহজ নয় ...

বিকল্প 3: ক্রোম হেডলেস এবং সম্ভবত একটি মোড়ক লাইব্রেরি ব্যবহার করুন

পেশাদাররা

  • জাভাস্ক্রিপ্ট কার্যকর করুন
  • নিখুঁত উপস্থাপনা কাছাকাছি

কনস

  • সম্পর্কিত সঠিক ফলাফলটি পাওয়া এত সহজ নয়:
    • পৃষ্ঠা লোড সময়
    • ভিউপোর্টের মাত্রা
  • স্কেল জটিল
  • এইচটিএমএলটিতে বহিরাগত লিঙ্ক রয়েছে তবে বেশ ধীর এবং এমনকি ধীর

বিকল্প 4: একটি API ব্যবহার করুন

পেশাদাররা

  • জাভাস্ক্রিপ্ট কার্যকর করুন
  • নিখুঁত উপস্থাপনা কাছাকাছি
  • ক্যাশিং বিকল্পগুলি সঠিকভাবে ব্যবহৃত হয় তখন দ্রুত
  • স্কেল এপিআই দ্বারা পরিচালিত হয়
  • সঠিক সময়, ভিউপোর্ট, ...
  • বেশিরভাগ সময় তারা একটি নিখরচায় পরিকল্পনা দেয়

কনস

  • আপনি যদি এগুলিকে প্রচুর ব্যবহার করার পরিকল্পনা করেন তবে নিখরচায় নয়

প্রকাশ: আমি এপিআইফ্ল্যাশের প্রতিষ্ঠাতা। আমি একটি সৎ এবং দরকারী উত্তর দেওয়ার জন্য যথাসাধ্য চেষ্টা করেছি।


2
প্রচুর সম্ভাব্য সমাধানগুলির সাথে একটি উত্তরের উত্তরের জন্য আপনাকে ধন্যবাদ
বিএসজম

wkhtmltoimage / pdf জাভাস্ক্রিপ্ট রেন্ডারিং সমর্থন করে। আপনি একটি জাভাস্ক্রিপ্টের বিলম্ব সেট করতে পারেন বা ডাব্লুএইচটিএমএলকে একটি নির্দিষ্ট উইন্ডো.স্ট্যাটাসের জন্য যাচাই করতে দিতে পারেন (যা আপনি জাভাস্ক্রিপ্ট দিয়ে সেট করতে পারেন যখন আপনি জানেন যে আপনার জেএস স্টাফগুলি সম্পন্ন হয়েছে)
ড্যানিয়েল জেড।

ফ্যান্টমজেএস গুগল ম্যাপের মতো ডায়নামিক স্টাফ সমর্থন করে। এটি সত্যিই একটি সম্পূর্ণ ওয়েব ব্রাউজার, কেবল কোনও প্রদর্শন সংযুক্ত না করে। তবে আপনাকে ভুগোলের সাহায্যে টাইলস লোড করার জন্য গুগল ম্যাপের জন্য কিছুটা অপেক্ষা করতে হবে (আমি 500 মিমি অপেক্ষা করি এবং লোকেরা বিলম্ব পরিবর্তন করতে দেয় - যদি এটি পর্যাপ্ত না হয় তবে সময় না বাড়িয়ে আবার দৌড়াতে ভাল, কারণ সেই টাইলগুলি ক্যাশে হয়েছে)।
লাডিস্লাভ জিমা

50

কোনও চিত্রের এইচটিএমএল রেন্ডার করার সময় এখানে সমস্ত উত্তর তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে খাঁটি জাভাস্ক্রিপ্টে তুলনামূলক সহজ হতে পারে। সেখানে হয় এমনকি ছিল এটি সম্পর্কে একটি নিবন্ধ MDN উপর ক্যানভাস বিভাগে।

কৌশলটি হ'ল:

  • আপনার এক্সএইচটিএমএলযুক্ত বিদেশী অবজেক্ট নোড সহ একটি এসভিজি তৈরি করুন
  • কোনও চিত্রের এসআরসি সেট করে সেই এসভিজির ডেটা url এ
  • 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()
}

কিছু বিষয় লক্ষণীয়

  • এসভিজির অভ্যন্তরে এইচটিএমএল হতে হবে এক্সএইচটিএমএল
  • সুরক্ষার কারণে কোনও চিত্রের ডেটা ইউআরএল হিসাবে এসভিজি কোনও বহিরাগত উত্স লোড করা যায় না বলে এইচটিএমএলটির জন্য বিচ্ছিন্ন সিএসএস স্কোপ হিসাবে কাজ করে। সুতরাং উদাহরণস্বরূপ একটি Google ফন্ট মত একটি টুল ব্যবহার করে inlined করা হয়েছে এই এক
  • এমনকি এসভিজির অভ্যন্তর এইচটিএমএল চিত্রের আকার ছাড়িয়ে গেলেও এটি ক্যানভাসে সঠিকভাবে আঁকতে পারে। তবে আসল উচ্চতাটি সেই চিত্র থেকে পরিমাপ করা যায় না। একটি নির্দিষ্ট উচ্চতার সমাধানটি ঠিক কাজ করবে তবে গতিশীল উচ্চতাতে আরও কিছুটা কাজ প্রয়োজন। সেরাটি হ'ল এসভিজি ডেটা কোনও আইফ্রেমে (বিচ্ছিন্ন সিএসএস স্কোপের জন্য) রেন্ডার করা এবং ক্যানভাসের জন্য ফলাফলের আকারটি ব্যবহার করা।

নিস! বাহ্যিক গ্রন্থাগার নির্ভরতা অপসারণ করা সত্যিই ভাল উপায়। আমি আমার গৃহীত উত্তরটি পরিবর্তন করেছি :-)
মার্টিন ডিলিল

সেই নিবন্ধটি আর নেই।
এমএসসি

2
দুর্দান্ত উত্তর, তবে এইচটিএমএল এবং ওয়েব এপিআইয়ের শিল্পের স্থিতিতে মন্তব্য করা, যা দেখতে স্বাভাবিকভাবে মনে হয় কিছু পিছনে ফেলেছে - সমস্ত কার্যকারিতা প্রযুক্তিগতভাবে রয়েছে তবে অদ্ভুত কোড পাথের অ্যারে (কোনও পাং উদ্দেশ্যে নয়) এর পিছনে প্রকাশিত হয়েছে that আপনি একটি ভাল ডিজাইন করা API গুলি থেকে যে ধরণের স্পষ্টতা আশা করবেন তা কিছুই নয়। সমভূমিতে: ব্রাউজারের পক্ষে Documentএটি একটি রাস্টার হিসাবে রেন্ডার করা (যেমন ক Canvas) খুব সম্ভবত তুচ্ছ, তবে কোনওরূপী এটি মানসম্মত করতে বিরক্ত না করায় আমাদের উপরোক্ত চিত্রের মতো পাগলামির অবলম্বন করতে হবে (এটি লেখকের কোনও অপরাধ নয়) কোড)।
amn

1
এই উত্তর stackoverflow.com/questions/12637395/… মনে হচ্ছে আপনি বেশ দূরে যেতে পারবেন তা ইঙ্গিত করে। মজিলা এবং ক্রোমের সীমাহীন ডেটা ইউরি দৈর্ঘ্য রয়েছে এবং বর্তমান আইইও 4 গিগাবাইটের অনুমতি দেয় যা প্রায় 3 জিবি চিত্র (বেস 64 এর কারণে) এ ফোটে। তবে এটি পরীক্ষা করা ভাল জিনিস হবে।
সিজেটি

3
- পরে কিছু দ্রুত এবং নোংরা পরীক্ষা - jsfiddle.net/Sjeiti/pcwudrmc/75965 ক্রোম, এজ এবং ফায়ারফক্স কমপক্ষে 10,000 পিক্সেলের প্রস্থে পৌঁছেছে (এই ক্ষেত্রে) প্রায় 10,000,000 এর একটি চরিত্র গণনা এবং একটি পিএনজি ফাইলাইজ 8MB এর। কঠোরভাবে পরীক্ষা করা হয়নি তবে বেশিরভাগ ব্যবহারের ক্ষেত্রে এটি যথেষ্ট।
সিজেটি

13

আপনি ফ্যান্টমজেএস ব্যবহার করতে পারেন যা একটি হেডলেস ওয়েবকিট ( সাফারিতে রেন্ডারিং ইঞ্জিন এবং (সম্প্রতি অবধি) ক্রোম) ড্রাইভার। কীভাবে পৃষ্ঠাগুলির স্ক্রিন ক্যাপচার করতে শিখতে পারি এখানে । আশা করি এইটি কাজ করবে!


এই কৌশলটি ভাল কাজ করে। তবে আপনার মন্তব্যের পরে 2 বছর কেটে গেছে। ফ্যান্টমজেএসের চেয়ে দ্রুত চালিত এমন কোনও কি আপনি এসেছেন? আমার অভিজ্ঞতাতে চিত্র জেনারেশনটি সাধারণত 2-5 সেকেন্ড সময় নেয় hant
ব্রায়ান ওয়েবস্টার

হেডলেস ক্রোম এখন সম্ভব। এটি দ্রুত কিনা তা আমি জানি না, তবে আপনি যদি সঠিক স্ক্রিনশট চান তবে এটি যাওয়ার ভাল উপায়।
জোশ মাগ

11

আপনি wkhtmltopdf এর মতো পিডিএফ সরঞ্জামটি ব্যবহার করতে পারেন। এবং তারপরে আপনি চিত্রম্যাগিকের মতো চিত্র সরঞ্জামে একটি পিডিএফ ব্যবহার করতে পারেন। স্বীকার করা যায় এটি হ'ল সার্ভার সাইড এবং একটি অত্যন্ত সংশ্লেষিত প্রক্রিয়া ...


12
অথবা আপনি কেবল wkhtmltopdf এর ইমেজ ভাই চালাতে পারেন, wkhtmltoimage।
রোমান স্টারকভ

1
এই লাইব্রেরি জন্য Node.js। কীভাবে সরল সীমারেখা?
ভ্লাদ

9

ক্রোম, ফায়ারফক্স এবং এমএস এজের জন্য আমি যে লাইব্রেরিটিতে কাজ করতে পেরেছি তা হ'ল রাস্টেরাইজ এইচটিএমএল । এটি 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) নোট করুন যে আমি নোডের অভ্যন্তরীণ এইচটিএমএল কল করছি
সেপ্টেম্বর GH

5

ব্যবহারের 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/


4

আমি এটি সেরা উত্তর হিসাবে আশা করি না, তবে এটি পোস্ট করা যথেষ্ট আকর্ষণীয় বলে মনে হয়েছিল।

এমন একটি অ্যাপ্লিকেশন লিখুন যা আপনার পছন্দসই ব্রাউজারটি পছন্দসই এইচটিএমএল ডকুমেন্টে খোলে, উইন্ডোটি সঠিকভাবে মাপ দেয় এবং স্ক্রিন শট নেয়। তারপরে, চিত্রের সীমানা সরান।


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>

আপনার প্রোগ্রামটিতে এইচটিএমএল 2 ক্যানভাসজেএস ফাইলটি অন্তর্ভুক্ত করতে ভুলবেন না। https://html2canvas.hertzen.com/dist/html2canvas.js


2

আপনি একা জাভাস্ক্রিপ্ট দিয়ে নির্ভুলভাবে এটি 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];
}];

আশাকরি এটা সাহায্য করবে!


আপনি কি উপরের দ্রুত সংস্করণ আছে? বা সম্ভব হলে আপনি কি আবার লিখতে পারেন?
এসএসএস

আপনি যে ওয়েব ভিউটি রেন্ডার করছেন সেটি লোড করতে আপনি যে কোডটি ব্যবহার করছেন তা ভাগ করে নেওয়ার কি আপত্তি মনে হবে? এটি আমার থাম্বনেল রেন্ডারারের জন্য একটি প্রতিশ্রুতিবদ্ধ পদ্ধতির মতো বলে মনে হচ্ছে। ধন্যবাদ!
ডেভ

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


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.