[英]Merge base64 images
我有幾層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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.