如何使用 fabric 在 canvas 上添加图像

Question

这是我第一次使用 fabric.js。我想在 canvas 上添加图片，但它不起作用

这是我的html

<canvas id="workCanvas" style="position: absolute; z-index:0; top:10%; left:10%"></canvas>

这是js

function imageOnCanvas() {
    var canvas = new fabric.Canvas('#workCanvas')

    fabric.Image.fromURL("image/flower.jfif",function(myImg) {
        console.log(myImg);
        canvas.add(myImg);
    })
}

Answer 1

您应该直接在 new fabric.Canvas("workCanvas");

中传递 id

参考。 http://fabricjs.com/fabric-intro-part-1#why_fabric

function imageOnCanvas() {
  var canvas = new fabric.Canvas("workCanvas");

  fabric.Image.fromURL(
    "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Example_image.svg/600px-Example_image.svg.png",
    function (myImg, err) {
      canvas.add(myImg);
      console.log(err);
    }
  );
}

imageOnCanvas();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>

<canvas id="workCanvas" style="position: absolute; z-index:0; top:10%; left:10%"></canvas>

如何使用 fabric 在 canvas 上添加图像

How to add image on canvas with fabric

html

javascript

canvas

html5-canvas

fabricjs