ডেটা ইউআরএল থেকে ক্যানভাসে একটি চিত্র অঙ্কন

Question

আমি কীভাবে একটি ক্যানভাসে একটি চিত্র খুলতে পারি? যা এনকোডড

আমি ব্যবহার করছি

var strDataURI = oCanvas.toDataURL(); 

আউটপুটটি এনকোডড বেস 64 চিত্র image আমি এই চিত্রটি ক্যানভাসে কীভাবে আঁকতে পারি?

আমি ব্যবহার করতে strDataURI এবং ইমেজ তৈরি করতে চান ? এটা কি পসিবল?
যদি এটি না হয় তবে সম্ভবত কোনও ক্যানভাসে চিত্রটি লোড করার সমাধান কী হতে পারে?

Comments

এটি এই ক্ষেত্রে কাজ করছে না :: jsfiddle.net/V92Gn/5376

— আরকাম

Answer 1

একটি ডেটা ইউআরএল দেওয়া, আপনি srcনিজের ডেটা ইউআরএল এ চিত্রটির সেটিংস সেট করে একটি চিত্র তৈরি করতে পারেন (হয় পৃষ্ঠায় বা খাঁটি জেএসে) । উদাহরণ স্বরূপ:

var img = new Image;
img.src = strDataURI;

drawImage()পদ্ধতি HTML5 এর ক্যানভাস প্রসঙ্গের আপনি একটি ক্যানভাস সম্মুখের সকল বা একটি চিত্র (অথবা ক্যানভাস, অথবা ভিডিও) কিছু অংশ কপি করতে দেয়।

আপনি এটির মতো ব্যবহার করতে পারেন:

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

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

Comments

অন ​​লোড হ্যান্ডলার ব্যবহার করা অবশ্যই একটি ভাল ধারণা। চিত্রটি লোড হতে কিছুক্ষণ সময় নিতে পারে তাই এটি নিরাপদভাবে চালানো ভাল। :)

— জুহো ভেস্পসালিনেন

@bebraw আসুন যে নিশ্চিত তা দেখতে: stackoverflow.com/questions/4776670/... :)

— Phrogz

@ ফ্রোগজ এটি আমাকে একটি ত্রুটি দেয়: var ctx = myCanvas.getContext ('2d'); পরীক্ষার জন্য আপনার কোডটি কেবল অনুলিপি করুন / গত করুন

— জেপসার বার্নার্ডিনো

@ জেপসার কি আপনার canvasআইডি সহ আপনার পৃষ্ঠায় কোনও উপাদান রয়েছে? আপনি কি তা নিশ্চিত করেছেন যে myCanvasতা বাতিল নয়? আপনার যদি এখনও সমস্যা হয় তবে নিজের প্রশ্ন পোস্ট করুন, বা জাভাস্ক্রিপ্ট চ্যাট চ্যানেলে আসুন ।

— ফ্রেগজ

@ ডেভিড মুরডোচ দুর্দান্ত তথ্য। আপনার কি এমন একটি ক্রোমিয়াম বাগ রয়েছে যার সাথে আপনি লিঙ্ক করতে পারেন, যাতে ব্যবহারকারীরা যখন জানতে পারবেন যে উপরের বিবৃতিটি আর সত্য নয়?

— ফ্রেগজ

Answer 2

function drawDataURIOnCanvas(strDataURI, canvas) {
    "use strict";
    var img = new window.Image();
    img.addEventListener("load", function () {
        canvas.getContext("2d").drawImage(img, 0, 0);
    });
    img.setAttribute("src", strDataURI);
}

Answer 3

সম্ভবত এই পোড়াটি থাম্বজেনকে সহায়তা করবে - জেএসফিডাল এটি ফাইলের API এবং ক্যানভাসকে চিত্রের থাম্বনেইসগুলি গতিশীলরূপে তৈরি করতে ব্যবহার করে।

(function (doc) {
    var oError = null;
    var oFileIn = doc.getElementById('fileIn');
    var oFileReader = new FileReader();
    var oImage = new Image();
    oFileIn.addEventListener('change', function () {
        var oFile = this.files[0];
        var oLogInfo = doc.getElementById('logInfo');
        var rFltr = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i
        try {
            if (rFltr.test(oFile.type)) {
                oFileReader.readAsDataURL(oFile);
                oLogInfo.setAttribute('class', 'message info');
                throw 'Preview for ' + oFile.name;
            } else {
                oLogInfo.setAttribute('class', 'message error');
                throw oFile.name + ' is not a valid image';
            }
        } catch (err) {
            if (oError) {
                oLogInfo.removeChild(oError);
                oError = null;
                $('#logInfo').fadeOut();
                $('#imgThumb').fadeOut();
            }
            oError = doc.createTextNode(err);
            oLogInfo.appendChild(oError);
            $('#logInfo').fadeIn();
        }
    }, false);
    oFileReader.addEventListener('load', function (e) {
        oImage.src = e.target.result;
    }, false);
    oImage.addEventListener('load', function () {
        if (oCanvas) {
            oCanvas = null;
            oContext = null;
            $('#imgThumb').fadeOut();
        }
        var oCanvas = doc.getElementById('imgThumb');
        var oContext = oCanvas.getContext('2d');
        var nWidth = (this.width > 500) ? this.width / 4 : this.width;
        var nHeight = (this.height > 500) ? this.height / 4 : this.height;
        oCanvas.setAttribute('width', nWidth);
        oCanvas.setAttribute('height', nHeight);
        oContext.drawImage(this, 0, 0, nWidth, nHeight);
        $('#imgThumb').fadeIn();
    }, false);
})(document);

Answer 4

কোনও নতুন চিত্র সেট করার আগে আপনি পুরানো চিত্রটি সাফ করতে চান।

নতুন চিত্রের জন্য আপনাকে ক্যানভাস আকার আপডেট করতে হবে।

আমি এইভাবে আমার প্রকল্পে করছি:

    // on image load update Canvas Image 
    this.image.onload = () => {

      // Clear Old Image and Reset Bounds
      canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.canvas.height = this.image.height;
      this.canvas.width = this.image.width;

      // Redraw Image
      canvasContext.drawImage(
        this.image,
        0,
        0,
        this.image.width,
        this.image.height
      );
    };

Answer 5

জাভাস্ক্রিপ্টে, ক্যানভাস আইডি নির্বাচনের জন্য jquery ব্যবহার করে:

 var Canvas2 = $("#canvas2")[0];
        var Context2 = Canvas2.getContext("2d");
        var image = new Image();
        image.src = "images/eye.jpg";
        Context2.drawImage(image, 0, 0);

HTML5:

<canvas id="canvas2"></canvas>

Comments

এটি ইউটিআরএল সম্পর্কিত ওপির প্রশ্নের উত্তর দেয় না।

— ফ্রেগজ

আপনি কেন ক্যানভাস নির্বাচন করতে jQuery ব্যবহার করবেন? ডকুমেন্ট.ইগমেন্টমেন্টবাইআইডি () টাইপ করা কি খুব বেশি কাজ?

— স্কট

এই কোডটি কাজ করে, যদিও এটি প্রশ্নের সাথে সম্পর্কিত নয়

— মোহাম্মদ আশফাক