Tải lên tệp góc

Question

Tôi đang sử dụng Angular-File-Upload để tải tệp lên máy chủ. Mọi thứ hoạt động tốt và tệp có thể được lưu trong DB.

Câu hỏi là, làm cách nào để tải lại hình ảnh mà tôi đã lưu khi ở chế độ chỉnh sửa?

Đây là chỉ thị để tạo canvas khi tải lên các pic

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

Đây là đoạn nội dung html rằng canvas tải khi có một tải lên:

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

Cảm ơn !!

Answer 1

Vì trình tải lên hoạt động tốt và bạn có thể lưu hình ảnh vào cơ sở dữ liệu, tất cả những gì bạn cần làm là hiển thị hình ảnh đã tải lên dưới dạng hình thu nhỏ trên canvas.

Điều đó có thể được thực hiện bằng một số jQuery như thế này:

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

Cùng mã cũng có thể được chuyển đổi thành một chỉ thị góc - một cái gì đó giống như <uploaded-image></uploaded-image>.

Answer 2

Viết ra một chỉ thị đơn giản để xem trước hình ảnh trả về là khá dễ dàng. Nhiều hơn hoặc ít hơn là phiên bản đơn giản của chỉ thị ngThumb mà bạn đã cung cấp.

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

Nếu tôi hiểu câu hỏi của bạn ngay, sau đó tôi nghĩ rằng bạn cần phải tải lên một blob (sau khi chỉnh sửa một hình ảnh trong canvas bạn có một số Data URI. Và bạn cần chuyển đổi int này o một Blob mà bạn có thể tải lên!

Dưới đây là giải pháp tôi sử dụng để tải lên một hình ảnh cắt với góc-file-upload:

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

Bạn cần phải sử dụng

• uploader.onBeforeUploadItem

ghi đè lên tệp thực tế = item._file!

PS: Cũng có chức năng chuyển đổi 'DataURI' thành 'Blob' trong liên kết đã cho!