我正在使用Angular-File-Upload将文件上传到服务器。一切正常，文件可以保存在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>
谢谢！
答案 0 :(得分：2)
由于上传器工作正常并且您可以将图像保存到数据库中，因此您需要做的就是在画布上以缩略图的形式显示上传的图像。
可以使用像这样的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>。
答案 1 :(得分：2)
// 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>
答案 2 :(得分：2)
如果我理解你的问题，那么我认为您需要上传 blob （因此在使用画布编辑图片后，您有 Data URI 。你需要将它转换成一个可以上传的Blob！
以下是我用于使用angular-file-upload上传裁剪图片的解决方案：
https://github.com/nervgh/angular-file-upload/issues/208#issuecomment-116344239
您需要使用
uploader.onBeforeUploadItem 覆盖实际文件= item._file！
PS：在给定的链接中还有一个将'DataURI'转换为'Blob'的功能！