Angular 17+GoJS如何捕获超2k*2k无裁切高清大图？

问题根源 #

你当前的代码在图表尺寸超过DiagramImageUpperBond（2000px）时，直接缩小了输出图片的画布尺寸，导致内容被裁切或压缩模糊。调整scale参数无效是因为你没有正确关联scale和size的关系，且强制缩小画布的逻辑覆盖了完整渲染的可能。

解决方案 #

要完整捕获高清大图，需要：

• 移除强制缩小画布尺寸的逻辑，改用基于缩放比例（scale）的高清渲染
• 确保size参数设置为图表实际尺寸乘以缩放比例，保证内容完整不裁切
• 若遇到浏览器Canvas最大尺寸限制，可切换为SVG导出再转图片（矢量转位图无模糊）

修改后的代码 #

// 定义高清缩放比例，比如2就是2倍高清，可根据需求调整
const HIGH_DPI_SCALE = 2;

public createImage(diagram: go.Diagram) {
    const bounds = diagram.documentBounds.copy();
    const imageDataOptions = this.createImageOptions(bounds);
    return diagram.makeImageData(imageDataOptions);
}

createImageOptions(bounds: go.Rect): go.ImageRendererOptions {
    const imageDataOptions: go.ImageRendererOptions = {
        background: 'white',
        // 关键：设置scale为高清比例，确保细节清晰
        scale: HIGH_DPI_SCALE,
        // 关键：设置size为文档实际尺寸乘以scale，保证完整渲染无裁切
        size: new go.Size(bounds.width * HIGH_DPI_SCALE, bounds.height * HIGH_DPI_SCALE)
    };

    // 可选：如果需要处理超大型图表（超出浏览器Canvas最大尺寸），可添加SVG fallback逻辑
    // if (bounds.width * HIGH_DPI_SCALE > 16384 || bounds.height * HIGH_DPI_SCALE > 16384) {
    //   return this.createSvgImageOptions(bounds);
    // }

    return imageDataOptions;
}

// 可选：SVG导出转图片的 fallback 方法
// private createSvgImageOptions(bounds: go.Rect): any {
//   const svg = diagram.makeSVG({
//     background: 'white',
//     scale: HIGH_DPI_SCALE,
//     size: new go.Size(bounds.width * HIGH_DPI_SCALE, bounds.height * HIGH_DPI_SCALE)
//   });
//   // 这里可以将SVG转换为图片数据，比如用canvas绘制SVG
//   const canvas = document.createElement('canvas');
//   const ctx = canvas.getContext('2d');
//   canvas.width = bounds.width * HIGH_DPI_SCALE;
//   canvas.height = bounds.height * HIGH_DPI_SCALE;
//   const img = new Image();
//   img.src = 'data:image/svg+xml;base64,' + btoa(svg.outerHTML);
//   img.onload = () => {
//     ctx.drawImage(img, 0, 0);
//     return canvas.toDataURL('image/png');
//   };
// }

关键说明 #

1. scale参数的作用：scale控制渲染的清晰度，设置为2表示输出2倍分辨率的图片，放大后依然清晰；若不需要超高清，设为1即可保证完整无裁切。
2. size参数的正确设置：必须将size设为文档尺寸 × scale，这样GoJS会渲染完整的图表内容，不会裁切任何部分。
3. Canvas尺寸限制处理：部分浏览器对Canvas最大尺寸有限制（比如16384px），如果图表超大，可先用makeSVG导出矢量SVG，再转换为位图图片，SVG本身是矢量，不会模糊，转图时可保持高分辨率。

内容的提问来源于stack exchange，提问作者Amey Tonape