8

私は単純な AngularJS / FabricJs アプリケーションを持っています。その目的は、アップロードする前に画像を移動/サイズ変更できるようにすることです。基本的に 4 つのステップ:

1) I present a form with a canvas, and a rectangle inside of form to represent a clip area 
2) browse for a local file 
3) add it to the canvas 
4) and have a button to capture the clip area inside of the canvas

コードを直接埋め込まれたフォームから angular ディレクティブの背後に移動すると、問題が発生します。問題が発生したディレクティブにフォームを移動すると、(明らかな) 問題なしで画像が読み込まれ、キャンバスに追加されます。ただし、キャンバスの任意の場所をクリックすると (たとえば、画像を移動しようとして)、追加した画像がキャンバスに表示されなくなります (ただし、fabricJs Canvas オブジェクトを調べると、オブジェクト配列の内部にあることが示されます)。

JS アプリとヘルパー:

var myApp = angular.module('myApp', [])

// helper function to bind tot he on change of a input/file object (angularJs workaround)
var invokeImageChange = function(that) {
    angular.element(that).scope().imageChange(that)
    angular.element(that).scope().$digest();
}

コントローラ：

var ImageCtrl = function($scope) {

    var desiredHeight = 300
    var desiredWidth = 770

    // I understand this docucment.gelElementById is not the angular way - and needs to be changed
    var myImageData = document.getElementById('fileData')
    var myImage = document.getElementById('myImage')
    var canvas = new fabric.Canvas('myCanvas')

    var rect = new fabric.Rect({
        fill: 'lightgray',
        left: canvas.width / 2,
        top: canvas.height / 2,
        width: desiredWidth,
        height: desiredHeight,
        stroke: 'darkgray',
        strokeDashArray: [5, 5],
        selectable: false
    });
    canvas.add(rect)
    var clipZone = {
        y: rect.top - (.5 * rect.height),
        x: rect.left - (.5 * rect.width),
        width: desiredWidth,
        height: desiredHeight,
        quality: 1
    }

    $scope.caption = "" ;
    $scope.fileUrl = "" ;

    $scope.imageChange = function(inp)  {
        console.log('imageChange')
        file = inp.files[0];
        fr = new FileReader();
        fr.onload = createImage;
        fr.readAsDataURL(file);

        var img = null

        function createImage() {
            console.log('createImage')
            img = new Image();
            img.onload = imageLoaded;
            img.src = fr.result;
        }

        function imageLoaded() {
            console.log('imageLoaded')
            var fabImg = new fabric.Image(img)

            fabImg.scale(1.0).set({
                left: canvas.width / 2,
                top: canvas.height / 2
            });

            canvas.add(fabImg)
            canvas.setActiveObject(fabImg)
        }
    }

    $scope.submit = function(event) {

    }

    $scope.capture = function() {
        console.log('capture')

    }
}

指令コード:

myApp.directive('ngImageEditor', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    controller: 'ImageCtrl',
    templateUrl: '\blah\pathToForm'
  };
});

TemplateUrl がこのフォームを参照する場所

<form name="uploadForm" ng-controller="ImageCtrl" method="post" enctype="multipart/form-data"
      action="/main/update" ng-submit="submit()">
    <div class="control-group">
        <label class="control-label" for="file">Image File</label>
        <div class="controls">
            <input type="file" name="file" ng-model="file" onchange="invokeImageChange(this)"/>
            <input type="text" id="fileData" name="fileData" ng-model="fileUrl"/>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <input type="button" value="Upload"  ng-click="capture()"/>
        </div>
    </div>
    <div>
        <canvas id="myCanvas" width="800" height="400" style="border:1px solid #000000;"></canvas>
    </div>
    <img id="myImage" style="border: 1px solid burlywood">
</form>

以下の JsFiddle が、私が話していることを人々が理解するのに役立つことを願っています。前もって感謝します！

再現するには

1) browse to an image
2) move the image (notice the image disappears in the second link)

動作中（画像を移動できます）（指示なし）：

http://jsfiddle.net/PNwbp/1/

破損 / 問題 (移動すると画像が消える) (ディレクティブ付き):

http://jsfiddle.net/faFVW/23/

4

1 に答える 1

6

テンプレートから ng-controller="ImageCtrl" を削除すると、コントローラーの別の $scope とインスタンスが作成され、それが壊れます。

<form name="uploadForm" /*ng-controller="ImageCtrl"*/ method="post" enctype="multipart/form-data"
      action="/main/update" ng-submit="submit()">
于 2013-09-09T21:12:48.977 に答える