在 PhaserJS 中以 .png 格式下载像素艺术图答案

【问题标题】：Download pixel art drawing as .png in PhaserJS在 PhaserJS 中以 .png 格式下载像素艺术图
【发布时间】：2021-11-18 12:45:23
【问题描述】：

我需要通过 FilesSaver.js 从这个 Phaser example 下载创建的像素图作为 .png 图像，但 canvas 返回 null。

错误：

未捕获的 TypeError：无法读取 null 的属性（读取 'toBlob'）

这是保存功能：

function save() { 
var canvasX = document.getElementById("canvas");
canvasX.toBlob(function(blob) { saveAs(blob, "image.png"); }); }

drawingArea：（PhaserJS 2）

function createDrawingArea() {

    game.create.grid('drawingGrid', 16 * canvasZoom, 16 * canvasZoom, canvasZoom, canvasZoom, 'rgba(0,191,243,0.8)');

    canvas = game.make.bitmapData(spriteWidth * canvasZoom, spriteHeight * canvasZoom);
    canvasBG = game.make.bitmapData(canvas.width + 2, canvas.height + 2);

    canvasBG.rect(0, 0, canvasBG.width, canvasBG.height, '#fff');
    canvasBG.rect(1, 1, canvasBG.width - 2, canvasBG.height - 2, '#3f5c67');

    var x = 10;
    var y = 64;

    canvasBG.addToWorld(x, y);
    canvasSprite = canvas.addToWorld(x + 1, y + 1);
    canvasGrid = game.add.sprite(x + 1, y + 1, 'drawingGrid');
    canvasGrid.crop(new Phaser.Rectangle(0, 0, spriteWidth * canvasZoom, spriteHeight * canvasZoom));

}

如何获取绘图的数据来创建一个.png？

【问题讨论】：

你确定 canvasX 是一个 dom 元素而不是 A null 吗？（我的意思是，在具有id="canvas" 的dom 中是否存在任何<canvas> 元素）
我同意@JimishFotariya 的观点，即您应该确保您选择的元素具有id="canvas"。如果您至少确认了这一点，请检查变量 canvasX 是否实际上引用了预期的 DOM 元素。您首先需要准确无误（根据您提供的代码，我无法确认）。除此之外，请使用minimum reproducible example为您的问题添加更多详细信息。
@phentnil 感谢您的 cmets。如果我设置“this.game.canvas.id = 'canvas'”，PNG 将是整个舞台。如何在没有 UI 的情况下下载 jsut 绘图？
我不确定您是否知道示例中的 save 按钮将图像转换为二维六进制数组。例如：var frame0 = [ '.2222...', '.2......', '.2.33333', '.2.38883', '.2.38883', '.2.33333', '...33AA3', '...33AA3' ]; game.create.texture('yourKey', frame0, 6, 6, 0);
@Tom 我的解决方案有帮助，还是遗漏了什么？

标签： javascript html5-canvas phaser-framework filesaver.js

【解决方案1】：

我不认为画布的 ID 为 canvas。这就是为什么，我认为这是null 错误的原因。无论如何，我将原始示例代码作为此工作解决方案的基础。

免责声明：此代码只会从“绘制的图像”创建图像，而不是整个 UI。

主要思想，On Save：

创建一个新的canvas
将目标区域绘制到新画布中
创建图像，使用filesave.js

信息：我从全局定义的变量 canvasGrid 和 canvas 中获取信息/值，如果您的代码不包含它们，则此代码不会工作。

我希望这会有所帮助。

    function saveImage() { 
        // I assume there will be only one canvas on the page
        let realCanvas = document.querySelector('canvas');
        let ouputCanvas = document.createElement('canvas');
        let ctx = ouputCanvas.getContext('2d');

        // Get the target area (Details are from example code)
        let xOfGrid = canvasGrid.x - 1; // Info from Linie 267 from example
        let yOfGrid = canvasGrid.y - 1; // Info from Linie 267 from example

        // Info: this "canvas" is not a HTML Canvas Element
        let width = canvas.width;   // Info from Linie 256 from example
        let height = canvas.height; // Info from Linie 256 from example

        // Set initial Canvas Size
        ouputCanvas.width = width;
        ouputCanvas.height = height;

        // draw Image onto new Canvas
        ctx.drawImage(realCanvas, xOfGrid, yOfGrid, width, height, 0, 0, width, height);

        // Output Image, with filesaver.js
        ouputCanvas.toBlob(function onDone(blob) {
            saveAs(blob, "image.png");
        });
    }

    // An extra "Save Button", for testing
    window.addEventListener('DOMContentLoaded', function(){
        let btn = document.createElement('button');
        btn.innerText = 'SAVE FILE';
        btn.addEventListener('click', saveImage);
        document.body.prepend( btn );
    });

【讨论】：