Upload von Winkeldateien

Question

Ich verwende Angular-File-Upload, um die Datei auf den Server hochzuladen. Alles funktioniert gut und die Datei kann in der DB gespeichert werden.

Die Frage ist, wie kann ich die Bilder wiederherstellen, die ich im Bearbeitungsmodus gespeichert habe?

Dies ist die Richtlinie canvas zu schaffen, wenn das Bild

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

laden Dies ist eine HTML diese Last Leinwand Snippet, wenn ein Upload ist:

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

Dank !!

Answer 1

Da der Uploader bereits funktioniert und Sie die Bilder in der Datenbank speichern können, müssen Sie die hochgeladenen Bilder nur als Vorschaubilder auf einer Leinwand anzeigen.

, die getan werden können, um jQuery wie folgt aus:

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

Der gleiche Code könnte auch in eine andere Winkel Richtlinie umgewandelt werden - so etwas wie <uploaded-image></uploaded-image>.

Answer 2

Das Schreiben einer einfachen Anweisung zur Vorschau der zurückgegebenen Bilder ist ziemlich einfach. Mehr oder weniger ist die vereinfachte Version der ngThumb Direktive, die Sie zur Verfügung gestellt haben.

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

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

Answer 4

Wenn ich Ihre Frage richtig verstanden, dann denke ich Ihnen einen blob (so nach der Bearbeitung eines Bildes in Leinwand hochladen müssen Sie haben Sie eine Data URI. Und Sie müssen diese int konvertieren o ein Blob, den du hochladen kannst!

Dies ist die Lösung, die ich eine beschnittene Bild verwendet mit Winkel-Datei-Upload für das Hochladen:

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

Sie benötigen

• uploader.onBeforeUploadItem

zu verwenden, zu überschreiben die eigentliche Datei = item._file!

PS: Es gibt auch eine Funktion zum Konvertieren von 'DataURI' in 'Blob' in der angegebenen Verbindung!