ওয়েব ক্যাপচার এবং রূপান্তর করার সরঞ্জামসমূহ

জাভাস্ক্রিপ্ট সহ ওয়েবসাইটের স্ক্রিনশট নিন

জাভাস্ক্রিপ্ট API
সার্জারির ডায়গনিস্টিক্স প্যানেল আপনাকে আপনার কোডটি ডিবাগ করতে সহায়তা করতে পারে!

GrabzIt জাভাস্ক্রিপ্ট এপিআই ব্যবহার করা ইমেজ, ডিওএক্সএক্স বা পিডিএফ স্ক্রিনশটগুলি রাখার সহজ উপায়, পাশাপাশি অ্যানিমেটেড জিআইএফ রূপান্তরগুলিতে ভিডিও এবং আরো intহে আপনার ওয়েবসাইট শুধু প্রয়োজন GrabzIt জাভাস্ক্রিপ্ট লাইব্রেরি, জাভাস্ক্রিপ্ট কোডের একটি লাইন এবং কিছু গ্র্যাবজিট ম্যাজিক!

ডিফল্টরূপে একবার ক্যাপচার তৈরি হয়ে গেলে এটি আপনার প্যাকেজ দ্বারা নির্ধারিত সময়ের জন্য আমাদের সার্ভারে ক্যাশে থাকবে। তারপরে যদি গ্র্যাবসআইটির জাভাস্ক্রিপ্ট এপিআইতে কল করা হয় তবে পূর্বের ক্যাশেড স্ক্রিনশটের মতো একই পরামিতিগুলি ব্যবহার করে এর পরিবর্তে ফিরে আসবে, আপনার স্ক্রিনশট ভাতাটি অকারণে আটকাতে। এই ব্যবহারটি ব্যবহার করে অক্ষম করা যেতে পারে ক্যাশে প্যারামিটার.

শুরু হচ্ছে

জাভাস্ক্রিপ্ট এপিআই দিয়ে শুরু করতে এই পদক্ষেপগুলি অনুসরণ করুন:

  1. আপনার বিনামূল্যে পান অ্যাপ্লিকেশন কী.
  2. বিনামূল্যে ডাউনলোড করুন জাভাস্ক্রিপ্ট লাইব্রেরি এবং চেষ্টা করে দেখুন ডেমো অ্যাপ্লিকেশন.
  3. নীচের ওভারভিউটি পড়ে গ্র্যাবসআইটির জাভাস্ক্রিপ্ট এপিআই কীভাবে কাজ করে সে সম্পর্কে প্রাথমিক বিষয়গুলি সন্ধান করুন।

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

  • যেহেতু আপনার বর্তমানে কোন অনুমোদিত ডোমেইন নেই এই জাভাস্ক্রিপ্ট API আপনার জন্য কাজ করবে না! অনুগ্রহ আপনার ডোমেইন যোগ করুন!

সবচেয়ে সহজ উদাহরণ

ডাউনলোড শুরু করতে GrabzIt জাভাস্ক্রিপ্ট লাইব্রেরি এবং অন্তর্ভুক্ত grabzit.min.js ওয়েব পৃষ্ঠায় লাইব্রেরি আপনি ক্যাপচারটি প্রদর্শিত হতে চান বা এর সিডিএন সংস্করণে একটি রেফারেন্স অন্তর্ভুক্ত করতে পারেন grabzit.min.js নীচে প্রদর্শিত লাইব্রেরি। তারপরে আপনার ওয়েব পৃষ্ঠার বডি ট্যাগে একটি স্ক্রিনশট যুক্ত করতে নীচের কোডটি অন্তর্ভুক্ত করুন। আপনার প্রতিস্থাপন করতে হবে APPLICATION KEY তোমার সাথে অ্যাপ্লিকেশন কী এবং প্রতিস্থাপন https://www.tesla.com যে ওয়েবসাইটটির স্ক্রিনশট নিতে চান তা দিয়ে।

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com").Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

তারপরে কিছুক্ষণ অপেক্ষা করুন এবং ওয়েবপৃষ্ঠাটি পুনরায় লোড করার প্রয়োজন ছাড়াই চিত্রটি স্বয়ংক্রিয়ভাবে পৃষ্ঠার শীর্ষে উপস্থিত হবে। যদিও এই চিত্রটি ব্রাউজারে তৈরি হয়েছে আপনি এখনও ব্যবহার করতে পারবেন এই কৌশলগুলি save আপনার নিজের সার্ভারে ক্যাপচার আপনি যদি চান.

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

আপনার স্ক্রিনশট কাস্টমাইজ করা

অ্যাপ্লিকেশন কী এবং ইউআরএল বা এইচটিএমএল প্যারামিটারগুলির প্রয়োজন রয়েছে, অন্য সবগুলি পরামিতি .চ্ছিক। আপনার প্রয়োজনীয় প্রতিটি alচ্ছিক প্যারামিটারের জন্য নিম্নলিখিত প্যারামিটারটিকে JSON অভিধান হিসাবে তার মান সহ প্যারামিটার যুক্ত করা হয়।

উদাহরণস্বরূপ, যদি আপনি একটি PNG ফরম্যাটে 400px প্রস্থ এবং 400px উচ্চতা সহ একটি স্ক্রিনশট নিতে চান এবং স্ক্রিনশট নেওয়ার আগে 10 সেকেন্ড অপেক্ষা করতে চান তাহলে আপনি নিচের কাজটি করবেন।

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>

যেহেতু জাভাস্ক্রিপ্ট এপিআইয়ের কোনও ওয়েব পৃষ্ঠার এইচটিএমএলটিতে সহজেই অ্যাক্সেস রয়েছে এটি ক্যাপচারের জন্যও আদর্শ গতিশীল ওয়েবপৃষ্ঠা সামগ্রী বা বিষয়বস্তু একটি লগইন পিছনে.

পিডিএফ এবং আরও অনেক কিছু তৈরি করা

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

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "docx", "download": 1}).Create();
</script>

এটি মনে রাখা গুরুত্বপূর্ণ পরামিতি ডাউনলোড করুন যে কোনও ধরণের ক্যাপচার যেমন DOCX, পিডিএফ, পিএনজি, জেপিজি বা সিএসভি হিসাবে স্বয়ংক্রিয়ভাবে ডাউনলোড করতে ব্যবহার করা যেতে পারে।

উপাদানগুলিতে স্ক্রিনশট যুক্ত করা হচ্ছে

সার্জারির AddTo চিত্র বা পিডিএফ ক্যাপচারটিতে যুক্ত করার জন্য নীচের পদ্ধতিটি HTML নথির মধ্যে অবস্থান হিসাবে কোনও উপাদান বা একটি ডিওএম উপাদানটির আইডি গ্রহণ করে। নীচের উদাহরণে স্ক্রিনশটটি যুক্ত করা হবে insertCode DIV আছে।

অবশেষে যে কোনও প্রয়োজনীয় পাস করুন পরামিতি একটি JSON অভিধান হিসাবে ConvertURL or ConvertHTML পদ্ধতি। নীচের উদাহরণে বিলম্বটি 1000ms এবং ফর্ম্যাটটিকে পিএনজিতে সেট করা হয়েছে। তবে আপনার যদি অন্য কোনও অতিরিক্ত বিকল্পের প্রয়োজন না হয় তবে আপনাকে এই প্যারামিটারটি নির্দিষ্ট করার দরকার নেই।

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

ক্যাপচারগুলিকে একটি ডেটা ইউআরআইতে রূপান্তর করা

সার্জারির DataURI নীচের পদ্ধতিটি একটি কলব্যাক ফাংশন গ্রহণ করে, এই ফাংশনটি স্ক্রিনশট বা ক্যাপচারের বেসএক্সএনএমএমএক্স ডেটা ইউআরআই পাস করা হবে এটি একবার আপনার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনটিকে ক্যাপচারের উপর আরও নিয়ন্ত্রণের অনুমতি প্রদান করে।

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

GrabzIt পদ্ধতি

আপনি কী রূপান্তর করতে চান তা সূচিত করতে আপনাকে নীচের তিনটি পদ্ধতির একটি বেছে নিতে হবে।

তারপরে আপনি কীভাবে ক্যাপচারটি তৈরি হতে চান তা নির্দিষ্ট করতে এই পদ্ধতিগুলির একটি বা একাধিকটি চয়ন করুন।

এই জাভাস্ক্রিপ্ট কোড লাইব্রেরি সম্পূর্ণ ওপেন সোর্স! যদি আপনি উত্স কোডটি দেখতে বা উন্নত করতে চান তবে আপনি এটি খুঁজে পেতে পারেন GitHub.