base64 이미지 병합

Question

나는 KineticJS 캔버스의 여러 레이어가 서로 위에 있습니다. 나는 이것을 PNG로 내보낼 수 있기를 원합니다. .toDataURL() 기능을 사용하여 각 레이어를 내보낼 수 있지만 모두 하나의 이미지로 만들고 싶습니다.

모든 base64 문자열을 병합하는 방법이 있습니까? 서로의 상단에 각각의 이미지를 결합하여 최종 합성을 수출 - 당신은 SVG 4 층 SVG에게

Answer 1

@apsillers 될 것

<image width="100" height="100" xlink:href="data:image1/png;base64,..."> 
<image width="100" height="100" xlink:href="data:image2/png;base64,..."> 
<image width="100" height="100" xlink:href="data:image3/png;base64,..."> 
<image width="100" height="100" xlink:href="data:image4/png;base64,..."> 

를 포함 할 수

Answer 2

올바른 생각을 가지고있다. stage.toDataURL().

stage.toDataURL이 dataUrl에 모든 층의 조합을 보냅니다 :

KineticJS 결합 모든 레이어를 수출 할 수있는 바로 가기가 있습니다.

경고 : 모든 캔버스 이미지 내보내기와 마찬가지로 모든 이미지가 CORS 규격인지 확인해야합니다.

다음은 예제 코드입니다 :

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 400, 
    height: 400 
}); 
var layer1 = new Kinetic.Layer(); 
stage.add(layer1); 
var layer2 = new Kinetic.Layer(); 
stage.add(layer2); 


var img1=new Image(); 
img1.onload = function() { 
    var image1 = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     image: img1, 
     width: 100, 
     height: 100 
    }); 
    layer1.add(image1); 
    layer1.draw(); 
} 
img1.src="yourCORScompliantImage1.png"; 

var img2=new Image(); 
img2.onload = function() { 
    var image2 = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     image: img2, 
     width: 100, 
     height: 100 
    }); 
    layer2.add(image2); 
    layer2.draw(); 
} 
img2.src="yourCORScompliantImage2.png"; 

$("#export").click(function(){ 
     stage.toDataURL({ 
      callback: function(dataUrl) { 
       window.open(dataUrl); 
      } 
     }); 
});