在fabric.js

Question

我试图将图像存储在变量中，以便在某些事件后将其添加到画布中。

这样的代码正在运作

new fabric.Image.fromURL('http://www.w3schools.com/css/img_fjords.jpg', function (img)
       {
           console.log(img);
       });

在控制台上我得到这样的东西：

klass {filters: Array[0], resizeFilters: Array[0], _element: img.canvas-img, _originalElement: img.canvas-img, width: 560…}

这很好。 但是当我试图存储时，这个图像就像这样变化。

var img = new fabric.Image.fromURL('http://www.w3schools.com/css/img_fjords.jpg');

当我在console.log（img）时，我得到了这个

f…c.I…e.fromURL {}

请解释如何保存，以及我做错了什么。

Answer 1

您可以使用以下代码将图像添加到画布中。

var imgObj = new Image();
imgObj.src = "http://www.w3schools.com/css/img_fjords.jpg";
imgObj.onload = function () 
{
    var image = new fabric.Image(imgObj);
    image.set({
        angle: 0,
        padding: 0,
        originX: "center",
        originY: "center"
    });
}

添加图片时也可以设置其他属性。