循环通过 loadFromJSON() 加载的对象时，fabric.util.loadImage() 的奇怪行为答案

【问题标题】：Weird behaviour with fabric.util.loadImage() when looping through objects loaded via loadFromJSON()循环通过 loadFromJSON() 加载的对象时，fabric.util.loadImage() 的奇怪行为
【发布时间】：2015-05-04 00:59:06
【问题描述】：

为了尝试解决与 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();
});

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

【问题讨论】：

标签： json fabricjs

【解决方案1】：

乍一看您的代码，我没有发现任何问题……但我也认为代码可能效率低下？是否需要创建一个新的图像实例？

我相信你应该可以只在图像对象上设置 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();
});

【讨论】：

好吧，我不知道为什么我什至需要添加跨源属性，因为图像使用通配符标头进行跨源访问。所以，为了解决这个问题，这就是我重新创建图像的原因。我实际上已经弄清楚了，但不知道为什么它不能像上面那样工作。不过，我也会尝试简单地设置 cross origin 属性。

【解决方案2】：

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

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

【讨论】：