javascript - 啊，啪！尝试使用 Fabric JS 在移动设备中加载大画布时的屏幕

Question

我正在尝试从带有背景图像的 JSON 数据加载大画布。在桌面上，它正在正确加载。但是在移动设备上，浏览器崩溃了。

HTML 代码：

<canvas id="myCanvas" width="600" height="600"></canvas>

我必须在画布窗口中加载并调整整个画布。

TS代码：

准备画布

// Calculate ratio of the canvas as per height and width
      prepareCanvas(width, height) {  // height = 3300, width = 2550
        let ratioHeight: any = Math.ceil((height / width) * 600);
        this.canvas = new fabric.Canvas("myCanvas", {
          backgroundColor: "#ffffff",
          selection: false,
          width: width <= 600 ? width : 600,
          height: width <= 600 ? height : ratioHeight
        });
        this.canvas.setDimensions(
          { width: width, height: height },
          { backstoreOnly: true }
        );
     }

从 JSON 加载 Canvas

  loadTemplateFromData(canvasData: any) {        
    this.canvas.loadFromJSON(
      canvasData,
      this.canvas.renderAll.bind(this.canvas),
      (o, object) => {
        object.set("selectable", false);
      }
    );
  }

使用上面的代码，画布在桌面浏览器中正确加载，但在移动浏览器上崩溃。我注意到的一件事是，如果画布宽度、高度像 300 x 300 一样小，那么它可以在移动浏览器中正确加载。如何在移动浏览器中加载大画布？

提前致谢。

标签： javascriptangularcanvasfabricjs