我有几层KineticJS画布,它们都在彼此之上。我希望能够将这些导出为PNG格式。我可以使用.toDataURL()
函数导出每个图层,但我希望将它们全部作为一个图像。合并base64图像
有没有办法合并所有的base64字符串?
我有几层KineticJS画布,它们都在彼此之上。我希望能够将这些导出为PNG格式。我可以使用.toDataURL()
函数导出每个图层,但我希望将它们全部作为一个图像。合并base64图像
有没有办法合并所有的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);
}
});
});
找不到关于CORS图片的很多信息。这只在图像在画布内使用时才需要?我实际上没有在画布中使用任何内容,所以我没事吧?另外,如果base64字符串太长,可能无法用作URL?我应该'var image = window.open(); image.document.write('');'。这两个选项现在工作正常,只是担心大字符串。非常感谢您的帮助。 –
如果所有画布内容都是在没有图像的情况下创建的,则不存在潜在问题。但如果您想了解更多关于CORS和图像的信息,请参阅“跨域安全性”。干杯! – markE
可以使含
<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
试试这个,https://jsfiddle.net/1hcrvc16/3/ –
它会更容易将所有图层绘制到一个单一的画布上。 'drawImage(img,x,y)'可以将一个画布元素作为其第一个参数。只需将每个画布(通过'drawImage')绘制到新的主画布上,然后在该主画布上调用'.toDataURL()'。 – apsillers
试试这个,https://jsfiddle.net/1hcrvc16/3/ –