没有 jQuery，图像上传在 Canvas 中不起作用？答案

【问题标题】：Image Upload not working in Canvas without jQuery?没有 jQuery，图像上传在 Canvas 中不起作用？
【发布时间】：2018-04-12 15:11:35
【问题描述】：

我正在尝试使用 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() 正在尝试在加载后查找图像，但如果没有它，画布将无法工作。

我怎样才能使用 Fabric 而不使用 jQuery 通过使用函数 init().

【问题讨论】：

标签： jquery html5-canvas fabricjs

【解决方案1】：

第一个解决方案

在body标签加载时调用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);

【讨论】：

谢谢！我现在明白了。