ngThumb 지시어에서 AngularJS 파일 업로드(angular-file-uppload 포함)

ngThumb 지시어에서 AngularJS 파일 업로드(angular-file-uppload 포함)

파일을 서버에 업로드하기 위해 각도 파일 업로드를 사용하고 있습니다.모든 것이 잘 작동하고 파일을 DB에 저장할 수 있습니다.

문제는 편집 모드에서 저장한 이미지를 다시 로드하려면 어떻게 해야 합니까?

이것이 작성 지침입니다.canvas사진을 올릴때

'use strict';

myApp

    .directive('ngThumb', ['$window', function($window) {
        var helper = {
            support: !!($window.FileReader && $window.CanvasRenderingContext2D),
            isFile: function(item) {
                return angular.isObject(item) && item instanceof $window.File;
            },
            isImage: function(file) {
                var type =  '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
                return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
            }
        };

        return {
            restrict: 'A',
            template: '<canvas/>',
            link: function(scope, element, attributes) {
                if (!helper.support) return;

                var params = scope.$eval(attributes.ngThumb);

                if (!helper.isFile(params.file)) return;
                if (!helper.isImage(params.file)) return;

                var canvas = element.find('canvas');
                var reader = new FileReader();

                reader.onload = onLoadFile;
                reader.readAsDataURL(params.file);

                function onLoadFile(event) {
                    var img = new Image();
                    img.onload = onLoadImage;
                    img.src = event.target.result;
                }

                function onLoadImage() {
                    var width = params.width || this.width / this.height * params.height;
                    var height = params.height || this.height / this.width * params.width;
                    canvas.attr({ width: width, height: height });
                    canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
                }
            }
        };
    }]);

업로드가 있을 때 캔버스를 로드하는 HTML 스니펫입니다.

<div class="table-responsive"  ng-hide="!uploaderImages.queue.length">
    <table class="table">
        <thead>
            <tr>
            <th width="50%">Name</th>
            <th ng-show="uploaderImages.isHTML5">Size</th>
            <th ng-show="uploaderImages.isHTML5">Progress</th>
            <th>Status</th>
            <th>Actions</th>
            </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in uploaderImages.queue">
          <td><strong>{{ item.file.name }}</strong>
            <div ng-show="uploaderImages.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
        </td>
        <td ng-show="uploaderImages.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
        <td ng-show="uploaderImages.isHTML5">
<div class="progress progress-xs margin-bottom-0">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div></td>
<td class="text-center">
    <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
    <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
    <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button></td>
</tr>
</tbody>
</table>
</div>

감사합니다!!

업로더는 이미 정상적으로 작동하고 있으며 이미지를 데이터베이스에 저장할 수 있으므로 업로드된 이미지를 캔버스에 썸네일로 표시하기만 하면 됩니다.

이는 다음과 같은 jQuery를 사용하여 수행할 수 있습니다.

// source of a large image - replace this with the URL of the uploaded image (served from the database)
var IMAGE_SRC = "http://cdn-media-1.lifehack.org/wp-content/files/2014/09/activities-on-the-beach.jpg";

// set the height for the thumbnail - your uploader currently has 100
var height = 100;

function drawImage() {
  // create a new Image object
  var img = new Image();

  // set up the onLoad handler on the image object to draw the thumbnail into the canvas
  img.onload = function() {
    // calculate the thumbnail width for the fixed height above, respecting the image aspect ratio
    var width = this.width / this.height * height;

    // set the dimensions on the canvas
    $("canvas").attr({
      width: width,
      height: height
    });

    // draw the image from the loaded image object
    $("canvas")[0].getContext("2d").drawImage(img, 0, 0, width, height);
  };

  // set the source of the image object to the URL of the uploaded image (served from the database)
  img.src = IMAGE_SRC;
}

// Do all of this when the button is clicked
$("button").click(drawImage);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Load image into Canvas</button>
<br />
<br />
<canvas></canvas>

같은 코드를 다른 각도 지시로 변환할 수도 있습니다.<uploaded-image></uploaded-image>.

반환된 이미지를 미리 볼 수 있는 간단한 지침을 적는 것은 매우 쉽습니다.어느 정도는 의 단순화된 버전입니다.ngThumb당신이 제공한 지시.

angular.module('components', [])
    .directive('imgPreview', [function () {
    return {
        restrict: 'E',
        template: '<canvas/>',
        replace: true,
        link: function (scope, element, attrs) {
            var myCanvas = element[0];
            var ctx = myCanvas.getContext('2d');
            var img = new Image;
            img.onerror = function () {
                throw new Error("Image can't be loaded");
            }
            img.onload = function () {
                myCanvas.width = img.width;
                myCanvas.height = img.height;
                ctx.drawImage(img, 0, 0); // Or at whatever offset you like
            };
            img.src = attrs.image;
        }
    }
}]);

데모

// source of a large image - replace this with the URL of the uploaded image (served from the database)
var IMAGE_SRC = "http://cdn-media-1.lifehack.org/wp-content/files/2014/09/activities-on-the-beach.jpg";

// set the height for the thumbnail - your uploader currently has 100
var height = 100;

function drawImage() {
  // create a new Image object
  var img = new Image();

  // set up the onLoad handler on the image object to draw the thumbnail into the canvas
  img.onload = function() {
    // calculate the thumbnail width for the fixed height above, respecting the image aspect ratio
    var width = this.width / this.height * height;

    // set the dimensions on the canvas
    $("canvas").attr({
      width: width,
      height: height
    });

    // draw the image from the loaded image object
    $("canvas")[0].getContext("2d").drawImage(img, 0, 0, width, height);
  };

  // set the source of the image object to the URL of the uploaded image (served from the database)
  img.src = IMAGE_SRC;
}

// Do all of this when the button is clicked
$("button").click(drawImage);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Load image into Canvas</button>
<br />
<br />
<canvas></canvas>

질문을 제대로 이해했다면 blob을 업로드해야 할 것 같습니다(따라서 캔버스에서 이미지를 편집한 후 Data URI가 있습니다).그리고 이것을 업로드 할 수 있는 Blob으로 변환시켜야 합니다!

다음은 각도 파일 업로드로 잘라낸 이미지를 업로드하는 데 사용한 솔루션입니다.

https://github.com/nervgh/angular-file-upload/issues/208#issuecomment-116344239

사용하셔야 합니다.

• uploader.onBeforeUploadItem

실제 파일을 덮어쓰다 =item._file!

PS: 'Data' 변환 기능도 있습니다.주어진 링크에서 URI'를 'Blob'으로!

언급URL : https://stackoverflow.com/questions/32840813/angularjs-file-upload-from-ngthumb-directive-with-angular-file-upload