php - imagenes - Carga de archivo AngularJS desde la directiva ngThumb(con carga de archivo angular)

subir imagen angular 4

Question

Estoy usando Angular-File-Upload para subir archivos al servidor. Todo funciona bien y el archivo se puede guardar en DB.

La pregunta es, ¿cómo puedo cargar las imágenes que guardé cuando estaba en modo de edición?

Esta es la directiva para crear canvas cuando cargue la foto

''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);
                }
            }
        };
    }]);

Este es un fragmento de html que carga el lienzo cuando hay una carga:

<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>

¡¡Gracias!!

Answer 1

Como el cargador ya está funcionando bien y puede guardar las imágenes en la base de datos, todo lo que necesita hacer es mostrar las imágenes cargadas como miniaturas en un lienzo.

Eso se puede hacer usando jQuery como este:

// 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>

El mismo código también podría convertirse en otra directiva angular, algo así como <uploaded-image></uploaded-image> .

Answer 2

Escribir una directiva simple para previsualizar las imágenes devueltas es bastante fácil. Más o menos es la versión simplificada de la directiva ngThumb que ha proporcionado.

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;
        }
    }
}]);

Demo

Answer 3

Si entiendo tu pregunta correctamente, entonces creo que debes subir un blob (así que después de editar una imagen en lienzo tienes un URI de datos . ¡Y necesitas convertir esto en un Blob que puedes subir!

Aquí está la solución que utilicé para subir una imagen recortada con angular-file-upload:

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

Tienes que usar

• uploader.onBeforeUploadItem

sobrescribir el archivo real = item._file !

PD: ¡También hay una función para convertir ''DataURI'' a ''Blob'' en el enlace dado!

Answer 4

// 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>