找不到在 div 中创建的画布元素答案

【问题标题】：Can't find canvas element created inside div找不到在 div 中创建的画布元素
【发布时间】：2019-12-06 10:19:25
【问题描述】：

我正在尝试创建一个不在 UI 上显示的画布元素并向其绘制 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 为分配的 div 绘制一个画布元素，我将画布视为 div 元素的 innerHTML。如何检索画布元素和样式，以便我可以在不显示在浏览器中的情况下转换为 png。

【问题讨论】：

标签： javascript canvas gojs

【解决方案1】：

他的问题是div 不在文档中，所以document.querySelector('canvas') 不会返回任何内容，因为它在文档中查找。

改变

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

到

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

【讨论】：

【解决方案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。另请考虑：https://gojs.net/latest/intro/makingSVG.html。

【讨论】：

但我目前没有画布，我想从我有的 goJS json 制作 png。该怎么做？
如果您不希望用户看到页面上的图表，请创建一个隐藏的 DIV 及其图表。初始化Diagram，包括模型，然后调用Diagram.makeImage。