合併base64圖像

Question

我有幾層KineticJS畫布，它們都在彼此之上。我希望能夠將這些導出爲PNG格式。我可以使用.toDataURL()函數導出每個圖層，但我希望將它們全部作爲一個圖像。

有沒有辦法合併所有的base64字符串？

Answer 1

@apsillers有正確的想法 - 在彼此頂部結合每個圖像並導出最終複合。

KineticJS具有快捷方式導出所有層合併：stage.toDataURL().

stage.toDataURL將其所有層的組合導出到dataUrl。

警告：與所有畫布圖像導出一樣，您必須確保所有圖像均符合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); 
      } 
     }); 
}); 

Answer 2

可以使含

<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,..."> 

SVG將是4層SVG