chuyển đổi nhiều canvas thành dataURL trong html5

Question

Tôi muốn tham gia nhiều canvases để tạo một hình ảnh. Vì vậy, có phương pháp nào để tách nhiều hơn một canvas thành toDataURL để tạo một hình ảnh không?

Answer 1

thử ví dụ này hy vọng nó sẽ giúp xem 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

Có, phương pháp drawImage trên bối cảnh hiển thị canvas 2d chấp nhận yếu tố canvas làm yếu tố hình ảnh. Vì vậy, tất cả các bạn phải làm là:

• Tạo một vải mới
• Nhận ngữ cảnh của nó
• Vẽ tất cả các bức tranh sơn dầu khác để nó với drawImage
• Trích xuất hình ảnh cuối cùng từ vải mới này

Answer 3

tạo một hàm lấy nhiều đối số (các phần tử canvas), đặt chúng trên một canvas trống, sau đó trả về dataurl cho canvas mới tạo.

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

Bây giờ, chỉ cần nạp hàm nhiều phần tử canvas bạn muốn đưa vào một dataurl như vậy.

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

Trong ví dụ này, canvas cuối cùng được đặt trên canvas trống trước để đảm bảo đặt hàng các phần tử canvas của bạn một cách thích hợp.