Necesito descargar el dibujo de píxeles creado de este ejemplo de Phaser como una imagen .png a través de FilesSaver.js pero el lienzo devuelve un valor nulo.
Error:
TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'toBlob')
Esta es la función de guardar:
function save() { var canvasX = document.getElementById("canvas"); canvasX.toBlob(function(blob) { saveAs(blob, "image.png"); }); }área de dibujo: (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)); }¿Cómo obtener los datos del dibujo para crear un .png a partir de él?
Bueno, no creo que el lienzo tenga el canvas de identificación. Por eso, supongo que esa es la razón del error null . En cualquier caso, tomé el código de ejemplo original como base para esta solución de trabajo.
Descargo de responsabilidad: este código solo creará una imagen a partir de la "imagen dibujada", no toda la interfaz de usuario.
Idea principal, On Save :
canvasfilesave.js Información: estoy obteniendo información/valores de las variables definidas globalmente canvasGrid y canvas , si su código no los contiene, este código no funcionará.
Espero que esto ayude.
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 ); });