html5

Question

में एकाधिक कैनवास को dataURL में कनवर्ट करें मैं एक छवि बनाने के लिए एकाधिक कैनवास में शामिल होना चाहता हूं। तो क्या एक छवि बनाने के लिए toDataURL पर एक से अधिक कैनवस को गुप्त करने के लिए कोई तरीका है?

Answer 1

इस उदाहरण को आजमाएं उम्मीद है कि यह here

   //html block 


       <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 


       </canvas> 
       <canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;"> 
       Your browser does not support the canvas element. 
       </canvas> 

       <canvas id="Canvasimage" width="500" height="100" style="border:1px solid #c3c3c3;"> 
       Your browser does not support the canvas element. 
       </canvas> 
    <img id="finalimage" width="500" height="100" style="border:1px solid #c3c3c3;"/> 

       //script block 
       function loadImages(sources, callback) { 
        var images = {}; 
        var loadedImages = 0; 
        var numImages = 0; 
        // get num of sources 
        for (var src in sources) { 
         numImages++; 
        } 
        for (var src in sources) { 
         images[src] = new Image(); 
         images[src].onload = function() { 
          if (++loadedImages >= numImages) { 
           callback(images); 
          } 
         }; 
         images[src].src = sources[src]; 
        } 
       } 

       window.onload = function (images) { 

      //Canvas first here 
        var c = document.getElementById("myCanvas"); 
        var ctx = c.getContext("2d"); 
        ctx.fillStyle = "#FF0000"; 
        ctx.fillRect(0, 0, 200, 100); 
       //Canvas second here 
        var c1 = document.getElementById("myCanvas1"); 
        var ctx1 = c1.getContext("2d"); 
        ctx1.fillStyle = "#00FF00"; 
        ctx1.fillRect(0, 0, 200, 100); 


       //Canvas final here. 
        var canvas = document.getElementById("Canvasimage"); 
        var context = canvas.getContext("2d"); 

        var sources = { 
         darthVader: c.toDataURL("image/png"), 
         yoda: c1.toDataURL("image/png") 
        }; 

        loadImages(sources, function (images) { 
         context.drawImage(images.darthVader, 100, 30, 200, 137); 
         context.drawImage(images.yoda, 350, 55, 93, 104); 
//finalimage here which has two canvas data 
       var finalimage = document.getElementById("finalimage"); 
     finalimage.src = canvas.toDataURL("image/png"); 
        }); 
       }; 

Answer 2

हां, drawImage कैनवास 2 डी प्रतिपादन संदर्भ पर विधि छवि तत्वों के रूप में कैनवास तत्व स्वीकार करती है। तो तुम सब करने की है:

• एक नया कैनवास
• बनाएं उसके संदर्भ जाओ
• drawImage
• साथ यह करने के लिए अन्य सभी कैनवस ड्रा इस नए कैनवास से अंतिम छवि निकालें

Answer 3

एक ऐसा फ़ंक्शन बनाएं जो एकाधिक तर्क (कैनवास तत्व) लेता है, उन्हें एक खाली कैनवास पर रखता है, फिर नव निर्मित कैनवास के लिए डेटारल देता है।

var getImadeData = function() { 
    var i = arguments.length, 
     tempCanvas = document.createElement("canvas"), 
     ctx = tempCanvas.getContext("2d"); 
    while (i--) { 
     ctx.drawImage(arguments[i], 0, 0); 
    }; 
    return tempCanvas.toDataURL(); 
}; 

अब फ़ंक्शन एकाधिक कैनवास तत्वों को खिलाएं जिन्हें आप एक डेटोरल में रखना चाहते हैं।

var newData = getImageData(canvas1, canvas2, canvas3); 

इस उदाहरण में, पिछले कैनवास खाली कैनवास पर रखा गया है पहले तो उचित रूप से अपने कैनवस तत्वों को ऑर्डर करने के लिए सुनिश्चित करें।