कोणीय फ़ाइल अपलोड

Question

मैं सर्वर पर फ़ाइल अपलोड करने के लिए Angular-File-Upload का उपयोग कर रहा हूं। सबकुछ ठीक काम करता है और फाइल डीबी में सहेजी जा सकती है।

सवाल यह है कि, मैं संपादन मोड में सहेजी गई छवियों को वापस कैसे लोड कर सकता हूं?

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

धन्यवाद !!

Answer 1

चूंकि अपलोडर पहले से ही ठीक काम कर रहा है और आप छवियों को डेटाबेस में सहेजने में सक्षम हैं, तो आपको अपलोड करने वाली छवियों को कैनवास पर थंबनेल के रूप में दिखाने की ज़रूरत है।

इस तरह की कुछ jQuery उपयोग किया जा सकता है कि: - <uploaded-image></uploaded-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>

एक ही कोड भी एक और कोणीय निर्देश में परिवर्तित किया जा सकता है।

Answer 2

लौटाई गई छवियों का पूर्वावलोकन करने के लिए एक सरल निर्देश लिखना काफी आसान है। आपके द्वारा प्रदत्त 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; 
     } 
    } 
}]); 

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

अगर मैं आपके सवाल का सही समझते हैं, तो मैं तुम्हें इतना कैनवास में एक छवि संपादन के बाद एक ब्लॉब (अपलोड करने की आवश्यकता लगता है कि आप Data URI है और आपको इस int को परिवर्तित करने की आवश्यकता है ओ ब्लॉब जिसे आप अपलोड कर सकते हैं!

यहाँ समाधान मैं कोणीय-फ़ाइल-अपलोड के साथ एक फसली छवि अपलोड करने के लिए प्रयोग किया जाता है:

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

आप

• uploader.onBeforeUploadItem

उपयोग करने के लिए ऊपर लिख करने की जरूरत है वास्तविक फ़ाइल = item._file!

पीएस: दिए गए लिंक में 'डेटाुरि' से 'ब्लॉब' में परिवर्तित करने के लिए एक समारोह भी है!