我正在使用 PhaserJS 創建圖形，我需要將它們匯出為高解析度影像，或者更好地匯出為基于矢量的影像。
示例代碼：
var config = {
width: 800,
height: 600,
type: Phaser.WEBGL,
parent: 'phaser-example',
scene: {
create: create
}
};
var game = new Phaser.Game(config);
function create ()
{
var graphics = this.add.graphics();
graphics.fillGradientStyle(0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 1);
graphics.fillCircle(300, 300, 200);
graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
graphics.fillCircle(500, 300, 140);
}
如何才能做到這一點？歡迎任何想法。
uj5u.com熱心網友回復：
SVG 是不可能的（開箱即用），因為移相器是基于 HTML5 畫布的（正如評論中提到的“Orkhan Alikhanov”）。
要從 Phaser 獲取影像，您可以簡單地執行以下操作：
// get the phaser-canvas
let canvas = document.querySelector('canvas');
let dataURL = canvas.toDataURL('image/png');
// to start the download, you could ....
let downloadHelper = document.createElement('a');
downloadHelper.setAttribute('download', 'dowload.png');
downloadHelper.setAttribute('href', dataURL);
downloadHelper.click();
對于高解析度，只需使移相器應用程式（游戲配置的width和height）非常大（您想要的最終解析度）。
旁注：如果您只想保存畫布的一部分，請查看此帖子和答案（https://stackoverflow.com/a/69358678/1679286），它顯示了如何將移相器畫布的部分保存為 png 檔案（它使用檔案保存庫https://github.com/eligrey/FileSaver.js）。
也就是說，如果你只使用 html5 畫布，你可以使用這個庫http://gliffy.github.io/canvas2svg/來創建 svg。這篇文章https://stackoverflow.com/a/21069008/1679286中提到了這一點，它似乎是 html5 畫布的包裝器，但這不適用于移相器。 更新：如果您使用的是Phaser.CANVAS. 您可以將與此示例中類似的背景關系/畫布注入Phaserconfig
從 WebGL 創建影像的演示：（
鏈接到檔案）
document.body.style = 'margin:0;';
var config = {
type: Phaser.WEBGL,
width: 536,
height: 183,
// this property should/can be set
preserveDrawingBuffer: true,
physics: {
default: 'arcade',
arcade: {
gravity:{ y: 100 },
debug: true
}
},
scene: {
create
},
banner: false
};
function create () {
var graphics = this.add.graphics();
graphics.fillGradientStyle(0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 1);
graphics.fillCircle(300, 300, 200);
graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
graphics.fillCircle(500, 300, 140);
this.input.on('pointerdown', _ => {
let canvas = document.querySelector('canvas');
let dataURL = canvas.toDataURL('image/png');
// to start the download, you could ....
let downloadHelper = document.querySelector('#link');
downloadHelper.setAttribute('download', 'dowload.png');
downloadHelper.setAttribute('href', dataURL);
});
}
new Phaser.Game(config);<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
Right Click and select "Save Link as ..."<br>
<a id="link">DOWNLOAD </a> <br/>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/494697.html
標籤：javascript 图像处理 移相器框架