Question

我正在尝试使用 HTML5画布和 Fabric.js 制作照片编辑应用。我想从计算机上传图片到画布。

代码：

JS：

$(document).ready(function () {

// Obtain a canvas drawing surface from fabric.js
var canvas = new fabric.Canvas('tinman');
var img = document.getElementById('imageLoader').files[0];
var imgInstance = new fabric.Image(img, {
    left: 100,
    top: 100,
    angle: 30,
    opacity: 0.85
 });

canvas.add(img);.

我将 HTML 用于文件上传：

<input type="file" id="imageLoader"/>

我知道 $（document）.ready（）正在尝试在加载后查找图片，但画布在没有它的情况下无法正常工作。

使用 init（）函数，如何在不使用 jQuery 的情况下使用 Fabric 。

Answer 1

第一个解决方案

加载正文标记时调用init功能。

//HTML
<body onload="init()">

//JavaScript
fucntion init(){
  var canvas = new fabric.Canvas('tinman');
  var img = document.getElementById('imageLoader').files[0];
  var imgInstance = new fabric.Image(img, {
      left: 100,
      top: 100,
      angle: 30,
      opacity: 0.85
  });
}
canvas.add(img);

第二种可能的解决方案

自我调用函数下面的代码在加载页面后立即执行，下面将解释您放在此下面的任何代码。

(function(){
  var canvas = new fabric.Canvas('tinman');
  var img = document.getElementById('imageLoader').files[0];
  var imgInstance = new fabric.Image(img, {
      left: 100,
      top: 100,
      angle: 30,
      opacity: 0.85
  });
})();
canvas.add(img);

没有jQuery，图片上传在Canvas中不起作用？

1 个答案: