合并 base64 图像

Merge base64 images

本文关键字：图像 base64 合并      更新时间：2023-09-26

我有几层 KineticJS 画布，它们都彼此重叠。我希望能够将它们导出为 PNG。我可以使用.toDataURL()函数导出每个图层，但我希望将它们全部作为一个图像。

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

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

你可以使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

相关文章：