如何在点击时替换画布上的图像？答案

【问题标题】：How do I replace an image on a canvas onclick?如何在点击时替换画布上的图像？
【发布时间】：2017-09-30 21:29:06
【问题描述】：

我正在使用 fabricjs 在画布上放置图像。我想了解如何将已经绘制的图像替换为来自 url onclick 的另一个图像。

我有限的理解让我认为我可能需要为每个图像设置一个 var，但我不确定如何将它与 fabricjs 画布连接起来。在过去的几个小时里，我一直在尝试不同的事情，但没有任何运气。

我尝试提交一个类似的问题，但删除了它，因为我认为这个问题可能太复杂了。任何帮助将不胜感激。这是我的代码：

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://lorempixel.com/400/400/', function(img) {
  var oImg = img.set({
    selectable: false
  })
  canvas.add(oImg).renderAll();
});

canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<canvas id="c" width="400" height="400"></canvas>

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案1】：

这就是你可以实现的方法：

var canvas = new fabric.Canvas('c');
var image, isImageLoaded;

fabric.Image.fromURL('//lorempixel.com/200/200/', function(img) {
   isImageLoaded = true;
   image = img.set({
      selectable: false
   })
   canvas.add(image).renderAll();
});

function replaceImage(imgUrl) {
   if (!isImageLoaded) return; //return if initial image not loaded
   var imgElem = image._element; //reference to actual image element
   imgElem.src = imgUrl; //set image source
   imgElem.onload = () => canvas.renderAll(); //render on image load
}

canvas.on('mouse:down', function() {
   replaceImage('//lorempixel.com/200/200/');
});

canvas {
   border: 1px solid #dddddd;
   border-radius: 3px;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

^{PS：抱歉没有给出太多解释。}

【讨论】：

没问题，谢谢——我会修改的。所以我会为每个不同的图像设置一个函数，就像你对 replaceImage('//lorempixel.com/200/200/'); 所做的那样？
我希望能够从列表中选择我替换当前图像的图像，所以我问是否这样做我会创建一个单独的函数（类似于你所做的）每个图像源？如果你愿意，我可以写一个新问题。我的意思不是在这里落后:)
您可以稍微修改replaceImage 函数以接受原始/源图像对象，这样您就不需要为每个图像创建此函数（多次）。见this

【解决方案2】：

你可以更简单地做到这一点。不明白为什么要为这样的事情使用额外的库。我用纯 JS 写了一些小东西，希望对你有进一步的帮助。

document.getElementById("image").onclick = function(){
  document.getElementById("image").src = "http://lorempixel.com/400/400/";
};

&lt;img id="image" src="http://lorempixel.com/400/400/"&gt;

【讨论】：

谢谢。我有兴趣学习如何使用fabricjs 来完成此任务，因为我正在使用画布，并且该库似乎为将来的功能打开了一堆。

【解决方案3】：

var canvas = new fabric.Canvas('c');
var oImg;
loadImage();
function loadImage(){
  fabric.Image.fromURL('https://lorempixel.com/400/400/',    function(img) {
    oImg && canvas.remove(oImg); //If image element alread added to canvas remove it.
    oImg = img.set({
      selectable: false
    })
    canvas.add(oImg); //add new image to canvas
    oImg.on('mousedown',onImgMouseDown); //add mouse down lisner to image
  });
}

function onImgMouseDown(){
 loadImage();
}

canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<canvas id="c" width="400" height="400"></canvas>

您也可以将 mousedown 侦听器添加到图像，并检查是否添加了元素，然后将其从画布中删除。然后在画布上添加一个新的。

【讨论】：