Question

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

然而，当我尝试在我自己的应用程序中实现它时，我遇到了问题。我使用angular tutorial作为应用程序。在我自己的应用程序中，我知道我应该将代码的最后一部分放在index.html中链接的问题中，并将代码的中间部分放在style.css中。但是，我不知道在哪里放置代码的第一部分，从我之前的extJS经验中我知道它应该是一个控制器。

我尝试在index.html的同一目录下创建一个名为controller.js的新文件，将代码粘贴到那里并将控制器包含在script标签的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});
    });
});

Answer 2

我找到了我做错的地方。这些后端代码没有任何问题，它位于index.html中，我在错误的位置编写控制器脚本，导致问题。我已经解决了这个问题。

我应该把控制器代码放在angularjs应用程序中

2 个答案: