स्थानीय रूप से एक कैनवस की सामग्री को दूसरे कैनवस में कॉपी कैसे करें

Question

मैं एक कैनवस की सभी सामग्रियों को कॉपी करना चाहता हूं और क्लाइंट-साइड पर उन्हें दूसरे में स्थानांतरित करना चाहता हूं। मुझे लगता है कि मैं इसे लागू करने के लिए canvas.toDataURL()और context.drawImage()विधि का उपयोग करूंगा लेकिन मैं कुछ मुद्दों पर चल रहा हूं।

मेरा समाधान यह होगा कि इसे Canvas.toDataURL()जावास्क्रिप्ट में एक छवि ऑब्जेक्ट में प्राप्त करें और संग्रहीत करें, और फिर context.drawImage()इसे वापस रखने के लिए विधि का उपयोग करें ।

हालाँकि, मेरा मानना ​​है कि यह toDataURLविधि एक 64 बिट एन्कोडेड टैग के साथ "data:image/png;base64,"प्रिपेंडेड है। यह एक वैध टैग नहीं लगता है, (मैं हमेशा इसे हटाने के लिए कुछ RegEx का उपयोग कर सकता हूं), लेकिन क्या 64 बिट एन्कोडेड स्ट्रिंग के बाद "data:image/png;base64,"एक वैध छवि का विकल्प है? क्या मैं यह कह सकता हूं image.src=iVBORw...ASASDAS, और इसे कैनवास पर वापस लाऊंगा?

मैंने कुछ संबंधित मुद्दों पर ध्यान दिया है: बेस 64 का उपयोग करके एक कैनवस से दूसरे कैनवस पर कैनवास छवि प्रदर्शित करें

लेकिन समाधान सही प्रतीत नहीं होते हैं।

Answer 1

वास्तव में आप एक छवि बनाने के लिए नहीं है। एक वस्तु के रूप में अच्छी तरह drawImage()से स्वीकार Canvasकरेंगे Image।

//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आता है ...

— पाउलो ब्यूनो

क्या आप एक उदाहरण प्रदान कर सकते हैं?

— शिबीनरघ सेप

@RogerGajraj असल में कैनवास का दिखना जरूरी नहीं है। यह वहां दिखाया गया है => 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;