heightmapper
heightmapper copied to clipboard
Render not completing in Chrome when multiplier too high
In main.js from line 447. When user selects high render multiplier => outputX, outputY are too large =>the resulting canvas doesn't work => the blob is null => no image gets saved. No error is raised to the user. The current limits for max canvas total pixels seem to be https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element. There should be a warning to the user or a max render multiplier depending on the browser.
main.js line 447:
// Stitch the image together
const renderCanvas = document.createElement('canvas');
renderCanvas.id = "renderCanvas";
renderCanvas.width = outputX;
renderCanvas.height = outputY;
const renderContext = renderCanvas.getContext("2d");
for(let i = 0; i < captures.length; i++) {
const xPixel = captureOrigins[i].x * zoomFactor;
const yPixel = captureOrigins[i].y * zoomFactor;
await addImageToCanvas(renderContext, captures[i], xPixel, yPixel);
console.log("added image to canvas");
}
logRenderStep("Saving render");
const blob = await getCanvasBlob(renderCanvas);
saveAs(blob, `${renderName.name ?? 'render'}.png`);