我正在尝试使用HTML5 canvas和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。
第一解决方案
加载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);