当循环通过loadFromJSON（）加载的对象时，fabric.util.loadImage（）的奇怪行为

为了解决CORS（）的奇怪问题，我尝试重新加载通过canvas.loadFromJSON（）加载的任何图像

但是，我遇到了一些奇怪的问题。有时只替换一个图像，有时我会得到一个图像的副本

这是我的密码：

canvas.loadFromJSON(<?php echo json_encode($objects); ?>, function() {
  var objArray = canvas.getObjects();

  for (var i = 0; i < objArray.length; i++) {
      canvas.setActiveObject(objArray[i]);

      var activeObject = canvas.getActiveObject();

      if(activeObject.type === 'image') {

          fabric.util.loadImage(activeObject.src, function(img) {
              var object = new fabric.Image(img);

              object.hasControls = true;
              object.lockUniScaling = true;
              object.scaleX = activeObject.scaleX;       
              object.scaleY = activeObject.scaleY;
              object.originX = activeObject.originX;
              object.originY = activeObject.originY;                
              object.centeredRotation = true;
              object.centeredScaling = true;

              canvas.add(object);
          }, null, {crossOrigin: 'Anonymous'});

          canvas.remove(activeObject);
      }
      activeObject.setCoords();
  }

  canvas.deactivateAll();
  canvas.renderAll();
  canvas.calcOffset();
});

canvas.loadFromJSON（，function（）{
var objArray=canvas.getObjects（）；
for（var i=0；i

---

你知道我为什么会遇到这些奇怪的问题吗？

第一眼看到你的代码，我没有发现任何错误。。。但我也认为代码可能有点低效？是否需要创建新的映像实例

我相信您应该能够在图像对象上设置crossOrigin属性

此代码未经测试，但我会尝试以下方法：

canvas.loadFromJSON(<?php echo json_encode($objects); ?>, function() {
  var objArray = canvas.getObjects();
  for (var i = 0; i < objArray.length; i++) {
    canvas.setActiveObject(objArray[i]);
    var activeObject = canvas.getActiveObject();
    if(activeObject.type === 'image') {
      activeObject.crossOrigin = 'Anonymous';
    }
  }
  canvas.deactivateAll();
  canvas.renderAll();
  canvas.calcOffset();
});

canvas.loadFromJSON（，function（）{
var objArray=canvas.getObjects（）；
for（var i=0；i

我遇到了同样的问题，并克服了它再次下载图像，然后将其重新分配给

对象。_element

使用

loadFromJSON

创建每个结构对象后

export const getImage = url => {
  return new Promise((resolve, reject) => {
      let img = new Image();
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.setAttribute('crossOrigin', 'anonymous');
      img.src = url;
  });
}
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), async (o, object) => {
  if (object.type === "image") {
    let imagecore = await getImage(object.src);
    object._element = imagecore;
  }
});

---

嗯，我不知道为什么我甚至需要添加cross-origin属性，因为图像被提供了一个用于cross-origin访问的通配符头。所以，为了绕开它，这就是我重新创建图像的原因。我实际上已经弄明白了，但不知道为什么它不能像上面那样工作。不过，我将尝试简单地设置交叉原点属性。