如何将图片添加到 Fabric 画布？

Question

我想在我的布料画布上添加图片/图标。在Fabric演示中给出的代码无法工作。

我想在我的布料画布上添加图片/图标。在Fabric演示中给出的代码无法工作。

fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});

这只是使我的整个画布变成空白。 我想添加图标作为可点击的元素，响应事件。

- Ankur Lathwal

Answer 1

我已经做了一个jsfiddle，通过使用fabric.Image.fromURL()函数和'mouse:down'事件，在画布上加载了一张jpg图片。在mouse:down事件内部，我检查用户是单击了对象还是画布。

下面是JavaScript代码片段：

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

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 //i create an extra var for to change some image properties
 var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150});
 canvas.add(img1); 
});

canvas.on('mouse:down',function(event){
  if(canvas.getActiveObject()){
    alert(event.target);
  }

})

但是如果我不使用额外的变量，我的示例也能正常工作：

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 canvas.add(myImg); 
});

如果您需要更多的 Fabric 事件，可以在这里查看：http://fabricjs.com/events/

jsfiddle： https://jsfiddle.net/tornado1979/5nrmwtxu/

希望能有所帮助，祝好运。

- Theo Itzaris

Answer 2

这段代码可以正常工作，但是需要使用 fabric.js 文件。

您还需要在头部中使用 fabric.js CDN 文件。

Fabric.js CDN->

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

var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 0,
  opacity: 0.75,
  width:300,
  height:300
});
canvas.add(imgInstance);   

#my-image{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas width="800" height="800" id="drawarea" style="border: 1px solid red;float: right">     </canvas>
<img src="https://via.placeholder.com/300.png" id="my-image" width="500px" height="500px">

- manoj chauhan

Answer 3

使用fabric.Image.fromURL方法时，我遇到了一个错误：

"污染的画布不能被导出"

所以我最终使用了crossOrigin选项，像这样：

fabric.Image.fromURL('https://placehold.co/300x300', (myImg) => {
 canvas.add(myImg);
}, {
   crossOrigin: 'anonymous',
});

- laszlo-horvath