ডোম উপাদানসমূহের স্ক্রিনশটগুলি ক্যাপচার করছে: সার্ভার সাইড ভিএস। ক্লায়েন্ট সাইড অ্যাপ্রোচ

কয়েক সপ্তাহ আগে, আমি চটিলাইজার সম্পর্কে লিখেছিলাম - একটি নতুন দিকের প্রকল্প যা আমি গত মাসে কাজ করছি।

অ্যাপ্লিকেশন এবং অ্যাপ্লিকেশনটির প্রবাহ সম্পর্কে একটি দ্রুত ওভারভিউ: চ্যাটিলাইজার আপনাকে আপনার হোয়াটসঅ্যাপ চ্যাট সম্পর্কে পরিসংখ্যান পেতে অনুমতি দেয়। অ্যাপ্লিকেশনটিকে কাজ করার জন্য, আপনাকে একটি হোয়াটসঅ্যাপ চ্যাটের রফতানি * .txt ফাইল আপলোড করতে হবে। চ্যাটিলাইজার পাঠ্য বিশ্লেষণ এবং বিশ্লেষণ করছে এবং এ থেকে কিছু আকর্ষণীয় ডেটা বের করছে। তারপরে, আপনাকে এমন ফলাফলের পৃষ্ঠায় পুনঃনির্দেশিত করা হচ্ছে যেখানে আপনি নিজের চ্যাটের ক্রিয়াকলাপের একটি দুর্দান্ত দৃশ্য দেখতে পাবেন।

চ্যাটিলেজার ফলাফল পৃষ্ঠার একটি উদাহরণ

এই ওয়েব অ্যাপ্লিকেশনটি বিকাশের সময় আমার একটি চ্যালেঞ্জ ছিল হ'ল ব্যবহারকারীদের ফলাফলের পৃষ্ঠার স্ক্রিনশট তৈরি করতে এবং এটি ডাউনলোড করে যাতে তারা এটি তাদের গ্রুপে ভাগ করতে পারে - পৃষ্ঠায় একটি url ভাগ না করে।

সার্ভার সাইড (নোডজেএস) অ্যাপ্রোচ

আমি ফ্যান্টমজেএস এবং "নোড ওয়েবশট" নামে একটি এনপিএম মডিউল ব্যবহার করে সার্ভার সাইড অ্যাপ্রোচ দিয়ে শুরু করেছি। এটির একটি খুব সহজ এপিআই রয়েছে যা আপনাকে প্রদত্ত ইউআরএল থেকে স্ক্রিনশট তৈরি করতে দেয়:

'ওয়েবশট' থেকে ওয়েব শট আমদানি করুন;

ওয়েব শট ('https://chatilyzer.com', 'chat.png', ফাংশন (ত্রুটি) {
  // স্ক্রিনশট এখন chat.png এ সংরক্ষণ করা হয়েছে
});

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

পেশাদাররা:

  • ব্যবহারের জন্য প্রস্তুত একটি মডিউল।
  • স্ক্রীনশটটি ক্লাউডে সংরক্ষণ করা হচ্ছে যাতে এটি যে কোনও সময় উপলব্ধ।
  • নমনীয় এপিআই যা আপনাকে স্ক্রিনশটের পছন্দসই প্রস্থ এবং উচ্চতা নির্ধারণ করতে দেয়।

কনস:

  • সমস্ত বা কিছুই নয় - স্ক্রিনশটটি সমস্ত পৃষ্ঠা ক্যাপচার করে এবং আপনি যে কোনও নির্দিষ্ট উপাদান ক্যাপচার করতে চান তা নিয়ন্ত্রণ করতে পারবেন না।
  • রেন্ডারিং - স্ক্রিনশট ক্যাপচার করার আগে আপনার যদি অ্যাসিঙ্ক জেএস লোড হওয়ার জন্য অপেক্ষা করতে হয় তবে আপনি সমস্যার মধ্যে পড়তে পারেন।
  • পরিবেশ - আপনি সত্যিকারের ব্রাউজার পরিবেশে নন এমনটি প্রদত্ত যে, ফ্যান্টমজেএস কাস্টম / গুগল ফন্টগুলি যথাযথভাবে পরিচালনা করে না, যা আপনার স্ক্রিনশটে রেন্ডার হয়ে যাওয়া একটি ডিফল্ট ফন্টকে নিয়ে যায়।
  • স্টোরেজ - স্ক্রিনশট তৈরি করার পরে, আপনাকে অবশ্যই কোনও বৈধ চিত্র url ব্যবহারকারীর কাছে ফিরিয়ে দিতে অবশ্যই এটি একটি ক্লাউড স্টোরেজে সংরক্ষণ করতে হবে। অর্থ, আপনার একটি ক্লাউড স্টোরেজ সরবরাহকারীর প্রয়োজন যা সম্ভবত আপনার আরও বেশি অর্থ ব্যয় করতে পারে।
  • সুরক্ষা - যদি স্ক্রিনশটের ডেটা সংবেদনশীল হয় তবে ক্লাউডে একটি অনুলিপি সংরক্ষণ করা ভাল পন্থা নয়।

সম্পাদনা: সম্প্রদায়ের কাছ থেকে কিছু প্রতিক্রিয়া পাওয়ার পরে দেখা যাচ্ছে যে "পপিটার" নামে একটি এনপিএম মডিউল ব্যবহার করে আর একটি সার্ভার সাইড সমাধান রয়েছে যা হেডলেস ক্রোমের শীর্ষে চলে। পপিটারের সাথে কীভাবে স্ক্রিনশট তৈরি করবেন তা এখানে:

কনড কপিপিটার = প্রয়োজনীয় ('কুকুরছানা)';

(async () =>
  কনস্ট ব্রাউজার = অপেক্ষা করুন কুকুরছানা.লাঞ্চ ();
  কনস্ট পেজ = অপেক্ষার ব্রাউজার.নিউপেজ ();
  অপেক্ষায় থাকা পৃষ্ঠা.goto ('https://chatilyzer.com');
  পেজ.স্ক্রিনশট ({পথ: 'chatilyzer.png'}) অপেক্ষা করুন;

  ব্রাউজার.ক্লোজ () অপেক্ষা করুন;
}) ();

এই মডিউলটি সমস্ত বা কিছুই, রেন্ডারিং এবং পরিবেশ সংক্রান্ত সমস্যার সমাধান করবে কারণ এটি ক্রমের মতো একই রেন্ডার ইঞ্জিন সরবরাহ করে।

ক্লায়েন্ট সাইড অ্যাপ্রোচ

আমি আমার ব্যবহারের ক্ষেত্রে সার্ভার পার্শ্ব পদ্ধতির ফলাফল যথেষ্ট ভাল পাইনি তাই আমি অন্যান্য বিকল্পগুলি অন্বেষণ করতে শুরু করেছি।

আমি "html2canvas" নামে একটি দুর্দান্ত শীতল জেএস লাইব্রেরি পেয়েছি, যা নাম অনুসারে, একটি এইচটিএমএল উপাদানকে ক্যানভাস উপাদান হিসাবে রূপান্তরিত করবে।

এইচটিএমএল 2 ক্যানভাস ওয়েবসাইট

আপনি দেখতে পাচ্ছেন যে এটি ব্যবহার করাও খুব সহজ। মূলত আপনি এইচটিএমএল 2 ক্যানভাস পদ্ধতিতে কল করছেন এবং একটি ডিওএম উপাদানকে আর্গুমেন্ট হিসাবে পাস করছেন। এই পদ্ধতিটি একটি প্রতিশ্রুতি দেয় যা আপনি একটি ক্যানভাস উপাদান নিষ্কাশন করতে ব্যবহার করতে পারেন।

এইচটিএমএল 2 ক্যানভাস (ডকুমেন্ট.কোয়ারী নির্বাচনকারী ("# ক্যাপচার"))। তারপর (ক্যানভাস এলম => {
    document.body.appendChild (canvasElm);
});

এরপরে, আপনি নিজের ব্যবহারকারীকে স্ক্রিনশট ডাউনলোড করতে সক্ষম করতে চান।

এটি করার উপায়টি আপনি নীচে দেখতে পাচ্ছেন জেএস টুডাআরএলআউট পদ্ধতিটি ব্যবহার করে:

// একটি বেস 64 ডেটা স্ট্রিং পান
var চিত্র টাইপ = 'চিত্র / পিএনজি';
var ইমেজডেটা = ক্যানভাস এল্ম.টোডাটা ইউআরএল (ইমেজ টাইপ);
// বর্তমান উইন্ডোতে ডেটা স্ট্রিংটি খুলুন
document.location.href = imageData.replace (ইমেজ টাইপ, 'ইমেজ / অক্টেট-স্ট্রিম');

"ক্যানভাস টিমাইজ" নামে আরও একটি জেএস লাইব্রেরি রয়েছে। আমি বরং এটি নিজের দ্বারা এটি লেখার পরামর্শ দিচ্ছি কারণ এটি আরও নমনীয়তা সরবরাহ করে এবং আপনাকে ক্যানভাস উপাদান থেকে একটি চিত্র ট্যাগ তৈরি করতে দেয়। সুতরাং আপনি ব্যবহার করে একই ফলাফল পেতে পারেন:

ক্যানভাস 2 আইমেজ.স্যাভএএসপিএনজি (ক্যানভাস এল্ম, প্রস্থ, উচ্চতা);

পেশাদাররা:

  • WYSIWYG - ফলাফল আপনি পর্দায় যা দেখছেন তার 1: 1।
  • সার্ভারের কোনও দিক নেই - সমস্ত ব্রাউজারে চলছে।
  • সুরক্ষা - যদি স্ক্রিনশটের ডেটা সংবেদনশীল হয় তবে ক্লায়েন্টের পক্ষে এটিকে আরও সুরক্ষিতভাবে ক্যাপচার করা হবে কারণ সার্ভার ফলাফলগুলি সম্পর্কে অবগত নয় এবং অন্য কোনও অনুলিপি সংরক্ষণ করছে না।

কনস:

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

উপসংহারে

এইচটিএমএল উপাদানগুলির থেকে কীভাবে স্ক্রিনশটটি ক্যাপচার করবেন সে সম্পর্কে দুটি পদ্ধতি রয়েছে এবং আপনার অ্যাপ্লিকেশনটির কী দরকার তা আপনার উচিত।

যখন আপনার ক্রস ব্রাউজার / প্ল্যাটফর্মের অভিজ্ঞতার প্রয়োজন হবে তখন সার্ভার সাইড এপ্রোচটি আপনি বেছে নিন এবং আপনার ব্যবহারকারীদের স্ক্রিনশট ক্যাপচার করার জন্য সঠিক ব্রাউজার থাকবে তা নিশ্চিত নয়। আপনার যে মূল্য দিতে হবে তা হ'ল ক্লাউড স্টোরেজ পরিষেবাদির শারীরিক অর্থ প্রদান এবং ভুল ফলাফল in

যখন আপনি নিশ্চিত হন যে আপনার ব্যবহারকারীদের স্ক্রিনশট ক্যাপচার করতে সক্ষম ব্রাউজার থাকবে (বা আপনি যাঁরা নয় তাদের জন্য মূল্য দিতে প্রস্তুত আছেন) এবং যখন স্ক্রিনশটের জন্য নির্ভুলতা থাকা আবশ্যক।

দ্রুত চিন্তা - আমি অনুমান করি যে সর্বোত্তম পন্থা তাদের মধ্যে একত্রিত করা হবে to কোনও স্ক্রিনশট ক্যাপচার করার জন্য ব্যবহারকারীর ব্রাউজারের সামঞ্জস্যতার আপনার সমর্থন রয়েছে কিনা তা আপনি যাচাই করতে পারেন এবং যদি না হয় তবে সার্ভার সাইড এপ্রোচটিতে ফ্যালব্যাক।

আশা করি আপনি নিবন্ধটি উপভোগ করেছেন। আপনি এটি পছন্দ মত তালি :)

নোডজেএস দিয়ে ওয়েব পৃষ্ঠাগুলির স্ক্রিনশট তৈরির অন্যান্য উপায় সম্পর্কে আপনি কি জানেন? মন্তব্য ভাগ!