Javascript 合并base64图像

我有几层KineticJS画布，它们都在彼此的上面。我希望能够将这些导出为PNG。我可以使用

.toDataURL（）

函数导出每个层，但我希望它们都作为一个图像

---

有没有办法合并所有base64字符串？

您可以使svg包含

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

---

将是4层svg

您可以使svg包含

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

---

将是4层svg

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

---

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

---

将所有层绘制到单个画布上会更容易<代码>绘图图像（img，x，y）可以将画布元素作为其第一个参数。只需将每个画布（通过

drawImage

）绘制到新的主画布上，然后在该主画布上调用

.toDataURL（）

。尝试此操作，将更容易将所有层绘制到单个画布上<代码>绘图图像（img，x，y）可以将画布元素作为其第一个参数。只需将每个画布（通过

drawImage

）绘制到新的主画布上，然后在该主画布上调用

.toDataURL（）

。尝试此操作，找不到有关CORS图像的详细信息。只有在画布中使用图像时才需要这样做吗？我在画布上没有用过任何东西，我还好吗？另外，如果base64字符串太长，它是否可以用作URL？我是否应该

var image=window.open（）；图像。文件。写入（“”）。目前这两种选择都很有效，只是担心有大的限制。非常感谢您的帮助。如果您的所有画布内容都是在没有图像的情况下创建的，那么就不会有任何潜在问题。但是，如果您想了解有关COR和映像的更多信息，请参阅“跨域安全”。干杯找不到有关CORS图像的详细信息。只有在画布中使用图像时才需要这样做吗？我在画布上没有用过任何东西，我还好吗？另外，如果base64字符串太长，它是否可以用作URL？我是否应该
var image=window.open（）；图像。文件。写入（“”）。目前这两种选择都很有效，只是担心有大的限制。非常感谢您的帮助。如果您的所有画布内容都是在没有图像的情况下创建的，那么就不会有任何潜在问题。但是，如果您想了解有关COR和映像的更多信息，请参阅“跨域安全”。干杯