在fabric.js中加載圖像fromUrl而不回調

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

添加圖像時也可以設置其他屬性。