没有jQuery，图片上传在Canvas中不起作用？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了没有jQuery，图片上传在Canvas中不起作用？相关的知识，希望对你有一定的参考价值。
我正在尝试使用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);
以上是关于没有jQuery，图片上传在Canvas中不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
带有 MultiPart 表单数据中的参数的图像上传在 Alamofire 4.0 中不起作用
.appendTo在.bind（加载）中不起作用 - jQuery