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

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

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

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

শুরু হচ্ছে

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

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

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

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

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

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

ইমেজ থেকে ইউআরএল
চিত্র থেকে HTML

<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 সেকেন্ড অপেক্ষা করতে চান তাহলে আপনি নিচের কাজটি করবেন।

ইমেজ থেকে ইউআরএল
চিত্র থেকে HTML

<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

<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

<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 পদ্ধতি

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

ConvertURL([url to capture], [options]) - ডিফল্টরূপে একটি জেপিজি স্ক্রিনশটটি একটি URL রূপান্তর করে conver জেএসওন অভিধানটি ধারণ করে পরামিতি alচ্ছিক।
ConvertHTML([html to convert], [options]) - এইচটিএমএল রূপান্তর, গতানুগতিক intওএ জেপিজি চিত্র। জেএসওন অভিধানটি ধারণ করে পরামিতি alচ্ছিক।
ConvertPage([options]) - ব্যবহারকারীর বর্তমান পৃষ্ঠাটি ক্যাপচার করে, গতানুগতিক intওএ জেপিজি চিত্র। জেএসওন অভিধানটি ধারণ করে পরামিতি alচ্ছিক।

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

UseSSL() - জোর করে তৈরি করুন এসএসএল ব্যবহারের জন্য অনুরোধ.
Encrypt() - একটি ক্রিপ্টোগ্রাফিক সুরক্ষিত কী দিয়ে স্বয়ংক্রিয়ভাবে একটি ক্যাপচার এনক্রিপ্ট করুন।
AddPostVariable(name, value) - এইচটিটিপি পোস্ট প্যারামিটার সংজ্ঞা দেয় এবং optionচ্ছিকভাবে মানটি, একাধিক পরামিতি যুক্ত করতে এই পদ্ধতিটিকে একাধিকবার বলা যেতে পারে। এই পদ্ধতিটি ব্যবহার করা গ্র্যাবজিটকে বাধ্য করবে একটি HTTP পোস্ট সঞ্চালন.
AddTemplateVariable(name, value) - সংজ্ঞা দেয় কাস্টম টেম্পলেট পরামিতি এবং মান, একাধিক পরামিতি যুক্ত করতে এই পদ্ধতিটিকে একাধিকবার বলা যেতে পারে।
AddTo([element | element id]) - একটি ক্যাপচার সন্নিবেশ করান into নির্দিষ্ট উপাদান।
Create() - ক্যাপচার সন্নিবেশ করান into বডি ট্যাগের শুরু, বা এটি যদি HTML ডকুমেন্টের মূল নোডটি উপস্থিত না করে।
CreateInvisible() - ক্যাপচারটি তৈরি করা হয়েছে তবে ওয়েব পৃষ্ঠায় দেখানো হয়নি।
DataURI([callback function], [decrypt]) - কলব্যাক ফাংশনের একক প্যারামিটারে ক্যাপচারের বেসএক্সএনএমএক্সএক্স ডেটা ইউআরআই প্রদান করে। ডিক্রিপ্ট প্যারামিটারটি সত্য হলে এটি কোনও এনক্রিপ্ট করা ক্যাপচারগুলি স্বয়ংক্রিয়ভাবে ডিক্রিপ্ট করে।

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