如何用织物在画布上添加图像

【问题标题】：How to add image on canvas with fabric如何用织物在画布上添加图像
【发布时间】：2021-09-25 00:29:25
【问题描述】：

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

这是我的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);
    })
}

【问题讨论】：

请检查控制台日志错误
没有错误...
你调用你的函数imageOnCanvas();了吗？
$(function() { imageOnCanvas(); }) 位于代码之上。是这样吗？

标签： javascript html canvas html5-canvas fabricjs

【解决方案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>

【讨论】：

这段代码在不同的地方工作，但在我的代码中不起作用。也许我的其他代码有问题谢谢:)
@ResetMara，尝试console.log(err) 就像我看到错误消息的方式一样。