javascript - 我应该将 Controller 代码放在 angularjs 应用程序中的哪里

Question

我刚刚开始学习 AngularJS 和 NodeJS。我正在尝试使用 Fabric.js 构建一个应用程序来上传图片并进行编辑。我看到了link在这里，第二个答案非常有帮助。

但是，当我尝试在自己的应用程序中实现它时，我遇到了问题。我用angular tutorial对于应用程序。在我自己的应用程序中，我知道我应该将代码的最后一部分放在index.html中链接的问题中，并将代码的中间部分放在style.css中。但是，我不知道将代码的第一部分放在哪里，根据我以前使用 extJS 的经验，我知道它应该是一个 Controller 。

我尝试在index.html的同一目录下创建一个名为controller.js的新文件，将代码粘贴到那里并将 Controller 包含到脚本标记中的index.html中，但它不起作用。

这是我正在尝试实现的js代码

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});

Answer 1

您不需要文件读取器，只需调用 createObjectURL

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
    var file = e.target.files[0];
    var url = URL.createObjectURL(file);
    fabric.Image.fromURL(url, function (img) {
        var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
        canvas.add(oImg).renderAll();
        var a = canvas.setActiveObject(oImg);
        var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
});