ここで私はangularjsアプリケーションにコントローラコードを入れてください

Question

私はangularjsとnodejの学習を始めました。 私は画像をアップロードして編集するためにfabric.jsを使用してアプリケーションを構築しようとしています。私はここでlinkを見てきました.2番目の答えは本当に役に立ちます。

私は自分のアプリケーションで実装しようとしたときに問題に直面しました。私はアプリケーションのためにangular tutorialを使用します。私自身のアプリケーションでは、index.htmlにリンクされている質問のコードの最後の部分を記述し、コードの中央部分をstyle.cssに入れるべきであることを知っています。しかし、extJSの以前の経験から、コードの最初の部分をどこに置くべきかは分かりません。コントローラーでなければなりません。

index.htmlと同じディレクトリにcontroller.jsという名前の新しいファイルを作成し、そこにコードを貼り付け、スクリプトタグ内のindex.htmlにコントローラを組み込みましたが、動作しませんでした。ここで

は私が

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

を実装しようとしていますJSコードであるあなたはちょうど私が間違ってやるところ私が見つけ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

を呼び出す必要があり、FileReaderのを必要としません。これらのバックエンドコードには何も問題はありません。index.htmlにあります。コントローラのスクリプトを間違った場所に貼り付けてトラブルを引き起こしました。私はすでにそれを解決しました。