Question

我有一个Angular 5应用程序，它使用.Net Core api来存储和下载图像。我可以使用前端的img标签来显示图像，但是在打字稿代码中我需要将图像添加到FabricJS Canvas中。我有这样的事情：

    const url = URL.createObjectURL(s); // eg: "blob:http://localhost:4200/8a8eda37-81d8-4392-ab26-4e4e10075f98"
    fabric.Image.fromURL(url, oImg => {
      oImg.set( {
        left: this.convertor.ToPixels(this.shape.origin.x, this.units),
        top: this.convertor.ToPixels(this.shape.origin.y, this.units),
        // top: 0, //this.shapeElement.top,
        // left: 0, //this.shapeElement.left,
        width: this.shapeElement.width,
        height: this.shapeElement.height
      });
      this.imageElement = oImg;
      // this.canvas.fabric.add(this.imageElement);
      group.add(this.imageElement);
    });

你可以看到我尝试了各种各样的坐标。似乎没什么用。

该组包含2个其他对象 - 矩形和一些文本。我希望图像是矩形中的背景，文本在顶部。

只有直接将图像添加到画布时才会显示图像。我真的更愿意将其添加到具有其他对象的组中。可能是矩形隐藏了图像，即使它有透明填充？

感激不尽的任何帮助：）

干杯

无法将图像加载到FabricJS Canvas

0 个答案: