将 konva 导出到服务器端的图像而无需渲染

Question

我有一个图像模板，当用户在模板中更改图像时，服务器会自动为用户呈现新图像。这就是我想做的。

我有一个来自我之前创建的模板的 json。现在我想通过 json.

使用 Konva init 在服务器端（expressjs，restful api）导出它

当我尝试这段代码时

import {Stage} from 'konva/lib/core';
app.get('/', (_req: Request, res: Response, _next: NextFunction) =>
    res.status(200).send({
        message: loadKonvaJson(),
    }),
);


const loadKonvaJson = () => {
    let stage = new Stage({
        container: 'container'
    });

    return stage.toDataURL({pixelRatio: 1});
}

我有一个错误

ReferenceError: document is not defined
    at Object.createCanvasElement (C:\Users\victorlee\Desktop\OmgGame\render-image-server\node_modules\konva\lib\Util.js:355:22)
    at getDevicePixelRatio (C:\Users\victorlee\Desktop\OmgGame\render-image-server\node_modules\konva\lib\Canvas.js:26:30)
    at SceneCanvas.Canvas (C:\Users\victorlee\Desktop\OmgGame\render-image-server\node_modules\konva\lib\Canvas.js:46:74)
    at new SceneCanvas (C:\Users\victorlee\Desktop\OmgGame\render-image-server\node_modules\konva\lib\Canvas.js:112:28)
    at Stage._buildDOM (C:\Users\victorlee\Desktop\OmgGame\render-image-server\node_modules\konva\lib\Stage.js:717:29)
    at new Stage (C:\Users\victorlee\Desktop\OmgGame\render-image-server\node_modules\konva\lib\Stage.js:62:15)
    at loadKonvaJson (C:\Users\victorlee\Desktop\OmgGame\render-image-server\index.ts:20:17)
    at exports.app.get (C:\Users\victorlee\Desktop\OmgGame\render-image-server\index.ts:17:14)
    at Layer.handle [as handle_request] (C:\Users\victorlee\Desktop\OmgGame\render-image-server\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\victorlee\Desktop\OmgGame\render-image-server\node_modules\express\lib\router\route.js:137:13)

Answer 1

当您尝试使用 nodejs 中的 Konva 时，请勿使用 container 属性。只是：

let stage = new Stage({});

Konva 试图在 DOM 中找到容器，但在 nodejs 环境中没有 DOM。

Update: 同样对于nodejs环境你必须使用konva-node package:

cont Konva = require('konva-node');

const stage = new Konva.Stage({
  width: 100,
  height: 100
});

将 konva 导出到服务器端的图像而无需渲染

Export konva to image in server side without render

node.js

express

konvajs