স্থানীয়ভাবে অন্য ক্যানভাসে কীভাবে একটি ক্যানভাসের বিষয়বস্তু অনুলিপি করবেন

Question

আমি একটি ক্যানভাসের সমস্ত বিষয়বস্তু অনুলিপি করতে চাই এবং সেগুলি ক্লায়েন্টের পাশে অন্যটিতে স্থানান্তর করতে চাই। আমি ভাবব যে এটি বাস্তবায়নের জন্য আমি পদ্ধতি canvas.toDataURL()এবং context.drawImage()পদ্ধতিটি ব্যবহার করব তবে আমি কয়েকটি সমস্যা নিয়ে চলেছি।

আমার সমাধানটি Canvas.toDataURL()জাভাস্ক্রিপ্টে কোনও চিত্র অবজেক্টে এটি পেতে এবং সংরক্ষণ করা হবে এবং তারপরে context.drawImage()পদ্ধতিটি এটিকে পিছনে রাখার জন্য ব্যবহার করা হবে।

তবে আমি বিশ্বাস করি যে toDataURLপদ্ধতিটি "data:image/png;base64,"এটিকে পুনরায় চাপিয়ে দিয়ে একটি 64 বিট এনকোডযুক্ত ট্যাগ প্রদান করে। এটি কোনও বৈধ ট্যাগ বলে মনে হচ্ছে না (আমি এটি সরাতে সর্বদা কিছু RegEx ব্যবহার করতে পারি), তবে 64৪ বিট এনকোডযুক্ত স্ট্রিংটি "data:image/png;base64,"একটি বৈধ চিত্রের পরে রয়েছে ? আমি কি বলতে পারি image.src=iVBORw...ASASDASএবং এটিকে আবার ক্যানভাসে আঁকতে পারি ?

আমি কিছু সম্পর্কিত সমস্যা দেখেছি: বেস64 ব্যবহার করে একটি ক্যানভাস থেকে অন্য ক্যানভাসে ক্যানভাস চিত্র প্রদর্শন করুন

তবে সমাধানগুলি সঠিক বলে মনে হচ্ছে না।

Answer 1

আসলে আপনাকে কোনও চিত্র তৈরি করতে হবে না। একটি বস্তুর পাশাপাশি drawImage()গ্রহণ করবে ।CanvasImage

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

কোনও ImageDataঅবজেক্ট বা Imageউপাদান ব্যবহারের চেয়ে দ্রুত উপায় ।

লক্ষ্য করুন sourceCanvasএকটি হতে পারে HTMLImageElement , HTMLVideoElement , অথবা একটি HTMLCanvasElement । এই উত্তরের নীচে একটি মন্তব্যে ডেভ দ্বারা উল্লিখিত হিসাবে , আপনি আপনার উত্স হিসাবে কোনও ক্যানভাস অঙ্কন প্রসঙ্গে ব্যবহার করতে পারবেন না । আপনার যদি ক্যানভাস উপাদানটি তৈরি করা হয়েছিল তার পরিবর্তে ক্যানভাস অঙ্কনের প্রসঙ্গ রয়েছে, নীচের প্রসঙ্গে মূল ক্যানভাস উপাদানটির একটি উল্লেখ রয়েছে context.canvas।

: এখানে একটি jsPerf প্রকট কেন এই একটি ক্যানভাস ক্লোন করার একমাত্র সঠিক ভাবে হয় http://jsperf.com/copying-a-canvas-element

Comments

একটি ছোট পয়েন্ট যা আমাকে ছড়িয়ে দিয়েছে: আপনি যখন একটি ক্যানভাস আঁকতে পারবেন ( HTMLCanvasElement), আপনি একটি প্রসঙ্গ ( ) আঁকতে পারবেন নাCanvasRenderingContext2D । myContext.canvasপরিবর্তে ব্যবহার করুন।

— ডেভ

@ ডেভ মন্তব্যটি অবশ্যই পড়তে হবে ... যদি সম্ভব হয় তবে +10 দিন;)। @ রবার্ট-হার্স্টকে অবশ্যই এই মন্তব্যে তার উত্তরটি পরিপূরক করতে হবে কারণ তিনি source canvasকোথা থেকে এসেছেন তা নির্দিষ্ট করেনি ...

— পাওলো বুয়েনো

আপনি একটি উদাহরণ প্রদান করতে পারেন?

— শিবিনরাগ

@ রোজারগাজরাজ আসলে ক্যানভাসটি দৃশ্যমান হবে না। এটি সেখানে প্রদর্শিত হয় => jsfiddle.net/d36wwtvj

— রবার্ট হার্স্ট

Answer 2

@ রবার্ট-হার্স্টের একটি পরিচ্ছন্ন পদ্ধতি রয়েছে।

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

    // select canvas elements
    var sourceCanvas = document.getElementById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext('2d');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;