使用 Fabric.js，当一个图像被缩放时，你如何将它替换为另一个图像？答案

【问题标题】：Using Fabric.js, when an image is scaled, how do you replace it with another image?使用 Fabric.js，当一个图像被缩放时，你如何将它替换为另一个图像？
【发布时间】：2015-09-22 10:55:23
【问题描述】：

我正在使用 FabricJS 构建我的在线 T 恤设计器的新版本，以替换我几年前创建的现有 Flash 设计器。

我遇到了一个需要帮助的问题。我使用的所有图像都是光栅图像。当我缩放图像或对其进行更改（例如重新着色）时，我会调用服务器以创建新图像，然后我需要能够替换画布上的现有图像。

我能够弄清楚如何做到这一点的唯一方法是使用画布方法 getActiveObject()。这很好用，但如果您选择了多个对象，您不知道要更新哪一个。

当图像最初添加到画布时，我将一个 onModified 事件处理程序附加到它。只有当图像的比例发生变化时，我才会调用服务器端脚本来生成新的图像。下面列出了我当前使用的代码。任何帮助将不胜感激。

谢谢

fabric.Image.fromURL(previewPath, function (img) {
var sprite = img.set({ left: leftX, top: topY, angle: angle, borderColor: 'black', cornerColor: 'red', cornerSize: 6, transparentCorners: false });
$scope.canvas.add(sprite);
$scope.canvas.renderAll();
sprite.on('modified', function () {
    // Modified event is only executed for scaling
    if (1 != sprite.scaleX.toString() || 1 != sprite.scaleY.toString()) {

        fabric.Image.fromURL(previewPath, function (img) {
            var newSprite = img.set({ left: leftX, top: topY, angle: angle, width: width, height: height });

            // Replaces visible object on canvas


            // Since new image is replacing old one, need to set the scale back to 1
            sprite.scale(1);

            $scope.canvas.renderAll();
        });


    }
});

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

不确定我是否正确阅读了它，但是您不能在创建织物对象时向它添加一个额外的属性来指示它是什么，然后使用它来确定要删除的对象吗？

例如在上面，你会做 sprite.objectName = "tshirtSleeves"，然后当你得到新的 T 恤袖子时，获取 objectName = "tshirtSleeves" 的织物对象并将其删除。

【讨论】：

【解决方案2】：

您可以遍历画布上的所有对象，检查它是否为图像，然后根据需要在此处更改图像。

如果画布上有很多非图像对象，此选项当然可能会出现效率问题。但这是一个选择。

当然，在此之后您确实需要执行 renderAll。

var objects = document.getElementById('canvasId').fabric._objects;

jQuery.each( objects, function( key, eachObject ) {
  if( eachObject.type == "image" ) {
    //Perform scale and image replacement as needed here
  }
});

$scope.canvas.renderAll();

【讨论】：

【解决方案3】：

其实很简单。只需将新的图像 url 传递给图像对象的 setSrc 方法，如下所示。

sprite.setSrc(previewPath, function (img) {
     sprite.scale(1);
     $scope.canvas.renderAll();
});

【讨论】：