কীভাবে জাভাস্ক্রিপ্ট দিয়ে একটি ডিভের স্ক্রিনশট নেবেন?

Question

আমি "এইচটিএমএল কুইজ" নামে কিছু তৈরি করছি। এটি পুরোপুরি জাভাস্ক্রিপ্টে চলেছে এবং এটি দুর্দান্ত।

শেষে, একটি ফলাফলের বাক্স পপ আপ হবে যা "আপনার ফলাফলগুলি:" বলেছে এবং এটি দেখায় যে তারা কতটা সময় নিয়েছে, কত শতাংশ পেয়েছে এবং 10 এর মধ্যে তারা কতগুলি প্রশ্ন পেয়েছে, আমি চাই একটি বোতাম যা বলতে চাই "ফলাফলগুলি ক্যাপচার করুন" এবং এটি কোনওরকম একটি স্ক্রিনশট বা ডিভের কিছু নেবে এবং তারপরে কেবল সেই পৃষ্ঠায় ক্যাপচার করা চিত্রটি দেখান যেখানে তারা ডান ক্লিক করতে পারে এবং "চিত্রটি সংরক্ষণ করুন" "

আমি সত্যিই এটি করতে পছন্দ করব যাতে তারা তাদের ফলাফল অন্যদের সাথে ভাগ করে নিতে পারে। আমি তাদের ফলাফলগুলি "অনুলিপি" করতে চাই না কারণ তারা সহজেই এটিকে পরিবর্তন করতে পারে। তারা যদি ইমেজটিতে যা বলে তা পরিবর্তন করে, ওহ ভাল।

কেউ কি এর উপায় বা এরকম কিছু করার উপায় জানেন?

Comments

ফ্যান্টমজ.এস.আর.জে একবার দেখুন । এটি ব্যবহার করে আপনি সার্ভারসাইডে এইচটিএমএল পৃষ্ঠার একটি সম্পূর্ণ চিত্র তৈরি করতে এবং ব্যবহারকারীকে ডাউনলোডের জন্য একটি লিঙ্ক দিতে পারেন।

— জোশুয়া

ইমেজ রূপান্তর এবং ডাউনলোড হওয়ায় খুশী হলাম নিবন্ধ HTML সামগ্রী codepedia.info/...

— Satinder সিং

npmjs.com/package/dom-to-image

— স্ট্যাক Underflow

Answer 1

না, আমি কোনও উপাদানটির 'স্ক্রিনশট' করার কোনও উপায় জানি না, তবে আপনি কী করতে পারেন তা হল কুইজ ফলাফলকে একটি ক্যানভাস উপাদানকে আঁকানো, তারপরে চিত্রটির বিষয়বস্তু সহ ইউআরআই পেতে HTMLCanvasElementঅবজেক্টের toDataURLফাংশনটি ব্যবহার করুন data:।

কুইজ শেষ হয়ে গেলে, এটি করুন:

var c = document.getElementById('the_canvas_element_id');
var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */

যখন ব্যবহারকারী "ক্যাপচার" ক্লিক করেন, তখন এটি করুন:

window.open('', document.getElementById('the_canvas_element_id').toDataURL());

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

Comments

ধন্যবাদ !! আমি ক্যানভাস সম্পর্কে কিছুই জানি না, তবে আমি এটি শিখব। আমি ক্যানভাস 2 ডি অঙ্কন প্রভাবগুলি কীভাবে ব্যবহার করব? আপনি কি আমাকে এই সাহায্য করতে পারেন? অনেক ধন্যবাদ! :)

— নাথান

মজিলার ডকুমেন্টেশন ব্যবহার করে দেখুন, এটি অনুসরণ করা সত্যিই বেশ সহজ: বিকাশকারী.মোজিলা.আর.ইন

— ক্যানভাস_টিউটোরিয়াল

এটি একটি নতুন উইন্ডো / ট্যাবে খোলার পরিবর্তে, আমি কি এটি কোনও ইনলাইন ডায়ালগ বক্সে খুলতে পারি? (ফ্যান্সিবক্স লাইটবক্স প্লাগইনের মতো?)

— নাথান

হ্যাঁ, আপনার ইউআরআইতে সেট imgরয়েছে এমন একটি ইনলাইন ডায়ালগ বাক্স থাকতে srcপারে data:। তবে, এটি সত্যিই প্রয়োজনীয় নয় - আপনি কেবল canvasইনলাইন ডায়ালগ বাক্সে নিজেকে রাখতে পারেন ; ব্যবহারকারীরা এটিতে ডান ক্লিক করতে পারেন এবং বর্তমান চিত্রকে একটি চিত্র হিসাবে সংরক্ষণ করতে পারেন।

— ডেলান আজাবানী

ধন্যবাদ :) আমি চিত্র সংস্করণটি ব্যবহার করতে পারি তাই তারা ডান ক্লিক করতে সক্ষম হবে এবং "হিসাবে চিত্রটি সংরক্ষণ করুন" ক্লিক করতে পারবেন

— নাথান

Answer 2

এইচটিএমএল 2 ক্যানভাস এবং ফাইলস্যাভার.জেএস ব্যবহার করে এটি @ দাথনের উত্তরের একটি সম্প্রসারণ ।

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;


                canvas.toBlob(function(blob) {
                    saveAs(blob, "Dashboard.png"); 
                });
            }
        });
    });
});

এই কোড ব্লকটি আইডিটি btnSaveক্লিক করার জন্য বোতামটির জন্য অপেক্ষা করে । এটি যখন হয়, এটি widgetডিভটিকে একটি ক্যানভাস উপাদানকে রূপান্তর করে এবং তারপরে "ড্যাশবোর্ড.পিএনজি" নামক একটি চিত্র হিসাবে ডিভিটি সংরক্ষণ করার জন্য সেভস () ফাইলস্যাভার ইন্টারফেস (ব্রাউজারগুলিতে ফাইলসভার.জেএস এর মাধ্যমে) ব্যবহার করে।

এই পরিশ্রমের একটি উদাহরণ এই ঝাঁকুনিতে পাওয়া যায় ।

Comments

আমার এখানে রেফারেন্স যুক্ত করতে হবে: এইচটিএমএল 2 ক্যানভাস, ফাইলসভার, ব্লব, ক্যানভাস-টু ব্লব। এর পরে এটি কাজ করে। ধন্যবাদ!

— সিर्थোমাস

দুর্দান্ত, এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। সোজা প্লাগ এন খেলা।

— rgshenoy

আপনি কি জানেন যে এটি থ্রি.জেএস এর সাথে কীভাবে কাজ করবে? আমার কাছে একটি ডিভ রয়েছে যা থ্রি.জেএস রেন্ডারার / ক্যানভাসে রয়েছে (রেন্ডারিয়োডেমেলমেন্ট) এবং তারপরে ডিভস রয়েছে। আমি পিতামাতার ডিআইভির একটি স্ন্যাপশট নিতে এবং সমস্ত কিছু ক্যাপচার করতে চাই? এটা কি সম্ভব? ধন্যবাদ!

— র্যাঙ্কিনস্টুডিও

আপনি কি আপনার ডিওমে চিত্র উপস্থিত হওয়া এড়াতে পারবেন? এটি সরাসরি ডাউনলোড করতে যেতে পারি না?

— কুলান

এটি প্রথম চেষ্টা করে আমার জন্য দুর্দান্ত কাজ করেছে এবং এমনকি মূল সিএসএস স্টাইলিং ইত্যাদির মতো দেখতে আশ্চর্যজনকভাবে নির্ভুল। নির্ভুলতার এই স্তরের সাথে বেশ ভার্চুয়াল স্ক্রিনশট। আমি যে দুটি লাইব্রেরি যুক্ত করতে হয়েছিল তার জন্য আমি সিডিএন ব্যবহার করেছি: <! - html2canvas -> <স্ক্রিপ্ট src = " cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/… > <! - ফাইলসভার - > <স্ক্রিপ্ট src = " cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/… >

— ওজি শান

Answer 3

কয়েক ঘন্টা গবেষণার পরে, শেষ পর্যন্ত আমি কোনও এলিমেন্টের স্ক্রিনশট নেওয়ার একটি সমাধান পেয়েছি, এমনকি যদি origin-cleanএফএলএজি সেট করা হয় (এক্সএসএস প্রতিরোধে), তবে কেন আপনি উদাহরণস্বরূপ গুগল ম্যাপস (আমার ক্ষেত্রে) ক্যাপচার করতে পারেন। আমি একটি স্ক্রিনশট পেতে সর্বজনীন ফাংশন লিখেছি। কেবলমাত্র আপনার অতিরিক্ত যা প্রয়োজন তা হ'ল HTML2 ক্যানভাস লাইব্রেরি ( https://html2canvas.hertzen.com/ )।

উদাহরণ:

getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) {
    // in the data variable there is the base64 image
    // exmaple for displaying the image in an <img>
    $("img#captured").attr("src", "data:image/png;base64,"+data);
});

মনে রাখবেন console.log()এবং alert()যদি আকারের আকারটি দুর্দান্ত হয় তবে আউটপুট উত্পন্ন করা যাবে না।

ফাংশন:

function getScreenshotOfElement(element, posX, posY, width, height, callback) {
    html2canvas(element, {
        onrendered: function (canvas) {
            var context = canvas.getContext('2d');
            var imageData = context.getImageData(posX, posY, width, height).data;
            var outputCanvas = document.createElement('canvas');
            var outputContext = outputCanvas.getContext('2d');
            outputCanvas.width = width;
            outputCanvas.height = height;

            var idata = outputContext.createImageData(width, height);
            idata.data.set(imageData);
            outputContext.putImageData(idata, 0, 0);
            callback(outputCanvas.toDataURL().replace("data:image/png;base64,", ""));
        },
        width: width,
        height: height,
        useCORS: true,
        taintTest: false,
        allowTaint: false
    });
}

Comments

যেখানে আপনি html2 ক্যানভাস ফাংশন সংজ্ঞায়িত করেছেন

— ভারতী

GetScreenshotOfElement () ফাংশনটি পৌঁছানোর আগে আমি লাইব্রেরি এইচটিএমএল 2 ক্যানভাসকে সংযুক্ত করেছি (আমার পোস্টের লিঙ্কটি দেখুন)। উদাহরণস্বরূপ <স্ক্রিপ্ট>-ট্যাগ সহ। কেবল এইচটিএমএল 2 ক্যানভাস ডাউনলোড করুন এবং এটি আপনার প্রকল্পে অনুলিপি করুন।

— কমলা01

@ কমলা01 - আমি এখনও Google মানচিত্রের রাস্তার লেনগুলি ধরতে পারছি না। এটি কেবলমাত্র জুম ইন এবং আউট বোতাম, মানচিত্র এবং উপগ্রহ পাঠ্যের স্ক্রিনশট। আপনি দয়া করে পুরো মানচিত্র ক্যাপচার সাহায্য করতে পারেন? ধন্যবাদ

— ফারহান সাহিবোল

Answer 4

আপনি যদি "এর হিসাবে সংরক্ষণ করুন" কথোপকথনটি করতে চান তবে কেবল চিত্রটি পিএইচপি স্ক্রিপ্টে দিন, যা উপযুক্ত শিরোনাম যুক্ত করে

"অল-ইন-ওয়ান" স্ক্রিপ্ট উদাহরণ script.php

<?php if(isset($_GET['image'])):
    $image = $_GET['image'];

    if(preg_match('#^data:image/(.*);base64,(.*)$#s', $image, $match)){
        $base64 = $match[2];
        $imageBody = base64_decode($base64);
        $imageFormat = $match[1];

        header('Content-type: application/octet-stream');
        header("Pragma: public");
        header("Expires: 0");
        header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
        header("Cache-Control: private", false); // required for certain browsers
        header("Content-Disposition: attachment; filename=\"file.".$imageFormat."\";" ); //png is default for toDataURL
        header("Content-Transfer-Encoding: binary");
        header("Content-Length: ".strlen($imageBody));
        echo $imageBody;
    }
    exit();
endif;?>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<canvas id="canvas" width="300" height="150"></canvas>
<button id="btn">Save</button>
<script>
    $(document).ready(function(){
        var canvas = document.getElementById('canvas');
        var oCtx = canvas.getContext("2d");
        oCtx.beginPath();
        oCtx.moveTo(0,0);
        oCtx.lineTo(300,150);
        oCtx.stroke();

        $('#btn').on('click', function(){
            // opens dialog but location doesnt change due to SaveAs Dialog
            document.location.href = '/script.php?image=' + canvas.toDataURL();
        });
    });
</script>

Answer 5

আপনি কোনও স্ক্রিন-শট নিতে পারবেন না: আপনাকে এটি করতে দেওয়া দায়বদ্ধ হওয়া দায়িত্বহীন সুরক্ষা হবে be তবে, আপনি পারবেন:

• সার্ভার-সাইড জিনিসগুলি করুন এবং একটি চিত্র তৈরি করুন
• ক্যানভাসের মতো কিছু আঁকুন এবং এটি একটি চিত্রকে রেন্ডার করুন (এটি সমর্থন করে এমন একটি ব্রাউজারে)
• সরাসরি চিত্রটিতে আঁকতে অন্য কিছু অঙ্কন গ্রন্থাগার ব্যবহার করুন (ধীর, তবে কোনও ব্রাউজারে কাজ করবে)

Comments

ধন্যবাদ! আমি ক্যানভাসের সাথে যাব, কারণ আমি কোনও "অঙ্কন গ্রন্থাগার" জানি না বা এটি কীভাবে করতে হয় তাও জানি না। আমি ক্যানভাসেও তেমন ভাল নই তবে চেষ্টা করব।

— নাথান

দুঃখিত, গুগল থেকে এসেছে বলেই আমি এটি মন্তব্য করতে চাই তবে ডাব্লুটিএফ "" দায়িত্বজ্ঞানহীন সুরক্ষা ঝুঁকি "আমি কি জিজ্ঞাসা করতে পারি, যদি আপনি জাভাস্ক্রিপ্টকে প্রদত্ত কর্ডগুলির মধ্যে একটি স্ক্রিনশট বা শট নিতে এবং BASE64 এর এনকোডড ডেটাটিকে কোনও স্ট্রিং হিসাবে ফিরিয়ে দেন তবে কোনও সুরক্ষা সমস্যা নেই

— বার্কর্ম্ন 01

@ মার্টিন বার্কার আমি (উদাহরণস্বরূপ) কোনও আইফ্রেমে কারও ফেসবুক পৃষ্ঠাটি টেনে আনতে পারি এবং তারপরে স্ক্রিনশট করতে পারি। সাধারণত কোনও ক্রস-সাইট iframe এক্সএসএস প্রতিরোধের জন্য অ্যাক্সেসযোগ্য DOM এর অংশ নয়, তবে ব্রাউজার বিক্রেতার পক্ষে এ জাতীয় ক্ষেত্রে এটি বন্ধ করা আরও কঠিন।

— বিজিডব্লিউ

@ মার্টিন বার্কার জাভাস্ক্রিপ্টটি কোনও তাত্পর্যপূর্ণ উত্সটিকে ব্যবহারকারীর দিকে নজর না দিয়ে তথ্য দিতে পারে, যেখানে "মুদ্রণ স্ক্রিন" ব্যবহারকারীর দ্বারা নিয়ন্ত্রিত হয় এবং কিছু স্বেচ্ছাচারী অবিশ্বস্ত ওয়েবসাইট নয়।

— বিজিডব্লিউ

কী মারছে। @ পিআইপিপ, যদি কোনও ওয়েবপৃষ্ঠা ফেসবুকের একটি আইফ্রেম লোড করতে পারে তবে ইতিমধ্যে বিচ্ছিন্নতা রয়েছে, কেন স্ক্রিনশট এপিআই দিয়ে এই ধরনের বিচ্ছিন্নতা বাড়ানো হবে না? যেমন। Div.ToPNG (), যেখানে পূর্বোক্ত iFrame সাদা করা হয়েছে? এটি একটি দায়িত্বজ্ঞানহীন সুরক্ষা ঝুঁকি নয়, এটি কেবল অন্তর্নির্মিত নয় এবং স্ক্রিনশট এপিআই-র এপিআই তৈরির জন্য কেউ "সম্ভাব্য" গোপনীয়তা / সুরক্ষা সমস্যার মাধ্যমে কাজ করেনি। উদাহরণস্বরূপ ইন্ট্রানেট ওয়েব অ্যাপ্লিকেশনগুলির সমর্থন হিসাবে এটি ব্যবহারের ক্ষেত্রে অগণিত সংখ্যার জন্য প্রচুর উপকারী হবে।

— টড

Answer 6

var shot1=imagify($('#widget')[0], (base64) => {
  $('img.screenshot').attr('src', base64);
});

এইচটিএমএলশট প্যাকেজটি একবার দেখুন , তারপরে ক্লায়েন্টের পাশের অংশটি গভীরভাবে দেখুন :

npm install htmlshot

Comments

এই এইচটিএমএল শট প্রকল্পটি এখনও রক্ষণাবেক্ষণ করা হচ্ছে? এনপিএম থেকে গিথুব লিঙ্কটি এখনও বিদ্যমান বলে মনে হচ্ছে না। এর জন্য আর কোন ওয়েবসাইট আছে?

— হোয়াটডিফ

@ ওয়াটসডিডিফ:: আমাকে আপনার প্রয়োজনীয়তা দিন, এবং নিশ্চিত হন যে আমি আপনাকে সহায়তা করব ince যেহেতু আমি এই লাইব্রেরির লেখক।

— আবডেন্নুর টুমি

ধন্যবাদ @ অবডেনর-টুমি। কোডটি সন্ধান করার জন্য আমি কেবল একটি এনপিএম ইনস্টল করেছি। দেখে মনে হচ্ছে এটি এইচটিএমএল 2 ক্যানভাস ব্যবহার করছে যা আমি চেষ্টা করেছি এবং আইই এর সাথে এবং আমার পৃষ্ঠার এসভিজি এবং জটিলতার কারণে সমস্যা নিয়ে এসেছি। সুতরাং দেখা যাচ্ছে যে এই গ্রন্থাগারটি আমাকে সেই সম্মতিতে সহায়তা করবে না।

— whatsTheDiff

আপনার গ্রাহককে IE এড়াতে হবে .. তাদের বলুন!

— আব্দেন্নুর টুমি

Answer 7

<script src="/assets/backend/js/html2canvas.min.js"></script>


<script>
    $("#download").on('click', function(){
        html2canvas($("#printform"), {
            onrendered: function (canvas) {
                var url = canvas.toDataURL();

                var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"电子签名详细信息.jpeg").appendTo("body");
                triggerDownload[0].click();
                triggerDownload.remove();
            }
        });
    })
</script>

উদ্ধৃতি

Answer 8

আপনি এইচটিএমএল 2 ক্যানভাসে ডিভি আইডি সংজ্ঞায়িত করতে হবে এমন কোনও অঞ্চলের স্ক্রিনশট ক্যাপচারের জন্য আপনি এই কোডটি ব্যবহার করতে পারবেন সহজ। আমি এখানে 2 ডিভিউ- ডিভিড

আইডি = "গাড়ি"
ডিভি আইডি = "চার্টকন্টেনার"
ব্যবহার করছি যদি আপনি কেবল গাড়ি ক্যাপচার করতে চান তবে গাড়িটি আমি এখানে বন্দী করব গাড়িটি ব্যবহার করুন আপনি কেবল গ্রাফ এইচটিএমএল 2 ক্যানভাস ক্যাপচারের জন্য চার্টকন্টেইনার পরিবর্তন করতে পারবেন ($ ( '# কার') এই কোডটি অনুলিপি করুন এবং আটকান

<html>
    <head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script>
    window.onload = function () {
    
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: "Simple Line Chart"
        },
        axisY:{
            includeZero: false
        },
        data: [{        
            type: "line",       
            dataPoints: [
                { y: 450 },
                { y: 414},
                { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
                { y: 460 },
                { y: 450 },
                { y: 500 },
                { y: 480 },
                { y: 480 },
                { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
                { y: 500 },
                { y: 480 },
                { y: 510 }

            ]
        }]
    });
    chart.render();
    
    }
</script>
</head>

<body bgcolor="black">
<div id="wholebody">  
<a href="javascript:genScreenshotgraph()"><button style="background:aqua; cursor:pointer">Get Screenshot of Cars onl </button> </a>

<div id="car" align="center">
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:20px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
</div>
<br>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="box1">
</div>
</div>>
</body>

<script>

function genScreenshotgraph() 
{
    html2canvas($('#car'), {
        
      onrendered: function(canvas) {

        var imgData = canvas.toDataURL("image/jpeg");
        var pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180);
        pdf.save("download.pdf");
        
      
      
      }
     });

}

</script>

</html>

Comments

কেন jQuery দুইবার অন্তর্ভুক্ত করা হয়েছে, এবং jQuery UI কেন অন্তর্ভুক্ত? সত্যি বলতে কী, আমি যা বলতে পারি তা থেকে এখানে jQuery এর মোটেই প্রয়োজন হয় না। document.getElementById('car')বাdocument.querySelector('#car')

— নাথান

আসলে আমি আমার প্রকল্পে কাজ করছি। সুতরাং আমি কেবল গ্রন্থাগারটি সরিয়ে ফেলার কথা ভুলে গেছি এবং কিছুই না।

— রুদ্র প্রতাপ সিং

Answer 9

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

Comments

ওপি কখনই পরামর্শ দেয়নি যে তিনি সার্ভার-সাইড প্রসেসিং ব্যবহার করছেন, যদিও তিনি যদি থাকতেন তবে এটি ঠিক ছিল।

— ডেলান আজাবানী

হ্যাঁ, আমি দুর্ভাগ্যক্রমে সার্ভার-সাইড স্টাফ ব্যবহার করতে পারি না। আমি সম্ভবত উপরের উত্তরগুলির সাথে একটিতে যাব। কিন্তু ধন্যবাদ! :)

— নাথান

Answer 10

আমি যতদূর জানি জাভাস্ক্রিপ্ট দিয়ে এটি সম্ভব নয়।

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

Comments

উত্তর দেওয়ার জন্য ধন্যবাদ :) আপনি ঠিক বলেছেন! আমি কেবল ফলাফলগুলির 10 টি জেপিজি চিত্র তৈরি করতে পেরেছিলাম এবং তারপরে তারা একবার বোতামটি ক্লিক করলে, এটি সেভ করার জন্য চিত্রটি প্রদর্শন করবে। একমাত্র সমস্যাটি হ'ল তারা যখন কুইজ শুরু করবেন তখন তাদের নামটি লিখতে হবে এবং আমি তা কুইজটি প্রকাশ করে এবং ফলাফল বাক্সের শেষে এটি তাদের নাম দেখায় এবং এটি "আরও ভাল করা" এর মত একটি মন্তব্য বলে ইত্যাদি। আমি তাদের নামটি ছবিতে রাখতে পারব না বা করব?

— নাথান