mehrere Canvases in dataURL in html5 konvertieren

Question

Ich möchte mehrere Canvases zu einem einzigen Bild zusammenfügen. Also gibt es irgendeine Methode, um mehr als eine Leinwände zu toDataURL zu verdecken, um ein einzelnes Bild zu machen?

Answer 1

versuchen Sie dieses Beispiel hoffe, dass es helfen wird zu sehen 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

Ja, die drawImage Methode im Canvas 2D-Renderingkontext akzeptiert Canvas-Elemente als Bildelemente. Also alles, was Sie tun müssen, ist:

• Erstellen Sie eine neue Leinwand
• Holen seinen Kontext
• Zeichnen Sie alle anderen Leinwänden, um es mit drawImage
• Extrahieren Sie das endgültige Bild von dieser neuen Leinwand

Answer 3

Erstellen Sie eine Funktion, die mehrere Argumente (Canvas-Elemente) annimmt, sie auf eine leere Fläche legt und dann die Daten für die neu erstellte Leinwand zurückgibt.

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(); 
}; 

Jetzt füttern Sie einfach die Funktion mehrere Canvas-Elemente, die Sie in eine Datenrolle wie so legen möchten.

In diesem Beispiel wird die letzte Leinwand zuerst auf der leeren Leinwand platziert, also stellen Sie sicher, dass Sie Ihre Leinwandelemente entsprechend bestellen.