여러 캔버스를 html5의 dataURL로 변환

Question

하나의 이미지를 만들기 위해 여러 캔버스에 가입하고 싶습니다. 하나의 이미지를 만들기 위해 하나 이상의 캔버스를 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

예, 캔버스 2 차원 렌더링 컨텍스트의 drawImage 메서드는 이미지 요소로 캔버스 요소를 허용합니다. 그래서 당신이해야 할 모든은 다음과 같습니다

• 는
• 이 새로운 캔버스에서 최종 이미지를 추출 drawImage
• 와 다른 모든 캔버스 그리기 컨텍스트 얻기 새로운 캔버스
• 만들기

Answer 3

여러 인자 (캔버스 요소)를 하나의 빈 캔버스에 놓은 다음 새로 만든 캔버스에 대한 dataurl을 반환하는 함수를 만듭니다.

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

이 예제에서는 마지막 캔버스가 먼저 빈 캔버스에 배치되므로 캔버스 요소를 적절하게 정렬해야합니다.