找不到在 div 中创建的 canvas 元素

Question

我正在尝试创建一个未在 UI 上显示的 canvas 元素并向其绘制 GoJS 数据

    const divElement: HTMLDivElement = document.createElement('div')
    divElement.id='pngCanvas';
    divElement.style.height='1000px';
    divElement.style.width='1000px';
    const floorNameData=JSON.parse(localStorage.getItem('floorNameArray'))
    const selectedFloor = floorNameData.find((item, index) => {
        return item.selected === true;
    });
    const mappedModelData=JSON.parse(localStorage.getItem('floorArray'))[selectedFloor.floorId]
    const fpInstance: Floorplan = new Floorplan(divElement);
    var virtualCanvas = document.querySelector('canvas');
    debugger
    fpInstance.model = go.Model.fromJson(mappedModelData);

GoJS 绘制一个 canvas 元素分配给 div, 我将 canvas 视为 div 元素的 innerHTML。如何检索 canvas 元素和样式，以便我可以转换为 png 而无需在浏览器中显示。

Answer 1

他的问题是 div 不在文档中，因此 document.querySelector('canvas') 不会 return 因为它在文档中查找。

改变

var virtualCanvas = document.querySelector('canvas');

到

var virtualCanvas = divElement.querySelector('canvas');

Answer 2

您不应依赖于 HTML DIV 元素中是否存在 Canvas 元素。它不是受支持的 API 的一部分，因此您不能依赖它。

相反，您应该调用 Diagram.makeImage 或 Diagram.makeImageData。 https://gojs.net/latest/api/symbols/Diagram.html#makeImage

阅读更多关于渲染的信息：https://gojs.net/latest/intro/makingImages.html. Also consider: https://gojs.net/latest/intro/makingSVG.html。

找不到在 div 中创建的 canvas 元素

Can't find canvas element created inside div

javascript

canvas

gojs