遍历通过loadFromJSON（）加载的对象时，fabric.util.loadImage（）的怪异行为>> [

Question

为了尝试解决CORS（here）带来的奇怪问题，我试图重新加载通过

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();
});

关于我为什么遇到这些奇怪问题的任何想法？

为了尝试解决CORS带来的奇怪问题（在这里），我试图重新加载通过canvas.loadFromJSON（）加载的所有图像，但是，我遇到了奇怪的问题。有时只有一个...

Answer 1

乍看您的代码，我没有发现任何错误...但是我还认为该代码可能效率不高？是否需要创建一个新的图像实例？

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

Answer 2

我有相同的问题，克服了它，再次下载图像，然后使用object._element创建了每个结构对象后，将其重新分配给loadFromJSON。