javascript - ইন-ব্রাউজার স্ক্রিনশট নিতে HTML5/ক্যানভাস/জাভাস্ক্রিপ্ট ব্যবহার করে




জাভাস্ক্রিপ্ট ভেরিয়েবল (2)

Google এর "একটি বাগ রিপোর্ট করুন" বা "প্রতিক্রিয়া টুল" আপনাকে একটি বাগ সম্পর্কে আপনার মতামত দিয়ে জমা দেওয়া একটি স্ক্রিনশট তৈরি করতে আপনার ব্রাউজার উইন্ডোটির একটি এলাকা নির্বাচন করতে দেয়।

জেসন স্মল দ্বারা স্ক্রিনশট, একটি নকল প্রশ্ন পোস্ট।

কিভাবে তারা এই করছেন? গুগল এর জাভাস্ক্রিপ্ট প্রতিক্রিয়া API here থেকে লোড করা here এবং প্রতিক্রিয়া মডিউল তাদের সংক্ষিপ্ত বিবরণ স্ক্রিনশট ক্ষমতা প্রদর্শন করা হবে।


আপনার ওয়েব অ্যাপ্লিকেশন এখন getUserMedia() ব্যবহার করে ক্লায়েন্টের সমগ্র ডেস্কটপের 'নেটিভ' স্ক্রিনশট নিতে পারে:

এই উদাহরণ একটি চেহারা আছে:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

ক্লায়েন্টকে ক্রোম ব্যবহার করতে হবে (এখনকার জন্য) এবং chrome: // ফ্ল্যাগগুলির অধীনে স্ক্রিন ক্যাপচার সমর্থন সক্ষম করতে হবে।


html2canvas উল্লেখ হিসাবে আপনি html2canvas ব্রাউজার ব্যবহার করে স্ক্রিনশট তৈরি করতে html2canvas লাইব্রেরি ব্যবহার করতে পারেন। এই লাইব্রেরিতে স্ক্রিনশট তৈরির উদাহরণ প্রদান করে আমি এই সময়ে তার উত্তরটি বিকাশ করবো (এই প্রশ্ন ফ্রেমে):

function report() {
  let region = document.querySelector("body"); // whole screen
  html2canvas(region, {
    onrendered: function(canvas) {
      let pngUrl = canvas.toDataURL(); // png in dataURL format
      let img = document.querySelector(".screen");
      img.src = pngUrl; 

      // here you can allow user to set bug-region
      // and send it with 'pngUrl' to server
    },
  });
}
.container {
  margin-top: 10px;
  border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>

<div class="container">
  <img width="75%" class="screen">
</div>

ডেটা-ইউরি হিসাবে ছবিটি পাওয়ার পরে report() ফাংশন report() ফাংশন ইন আপনি ব্যবহারকারীতে এটি প্রদর্শন করতে পারেন এবং তাকে মাউস দ্বারা "বাগ অঞ্চল" আঁকতে এবং তারপরে সার্ভারে স্ক্রিনশট এবং অঞ্চল সমন্বয় পাঠাতে অনুমতি দেয়।

এই উদাহরণে async/await সংস্করণ তৈরি করা হয়েছে: চমৎকার makeScreenshot() ফাংশন দিয়ে .

হালনাগাদ

সহজ সম্পাদনাযোগ্য উদাহরণ যা আপনাকে স্ক্রিনশট তৈরি করতে, অঞ্চল নির্বাচন করতে, বাগ বর্ণনা করতে এবং POST অনুরোধ পাঠাতে দেয় (এখানে প্রধান ফাংশনটি report() ) হয়।






screenshot