n4feng n4feng - 2 months ago 9
Node.js Question

where should i put controller code in a angularjs application

I have just started learning angularjs and nodejs.
I am trying to build an app using fabric.js to upload pictures and edit it. I have seen a link here, the second answer is really helpful.

However when I tried to implement it in my own application I have faced problem. I use the angular tutorial for the application. In my own application I know I should put the last part of the code from the question linked in index.html, and put the middle part of the code in style.css. However, I don't know where to put the first part of the code, from my previous experience in extJS I know it should be a controller.

I tried to create a new file called controller.js under the same directory of index.html, paste the code there and include the controller into the index.html in the script tag, but it didn't work.

Here is the js code I am trying to implement

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

You don't need the filereader, just have to call 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});
    });
});