Angularjs 使用ngImgCrop上传角度文件
我正在使用()裁剪图像,然后使用()将裁剪后的图像上载到服务器 我可以从ngImgCrop中的“on change”选项获取$dataURI。但我需要一个文件instace来调用$upload。 如何获取剪切图像的文件实例以便上载:Angularjs 使用ngImgCrop上传角度文件,angularjs,file-upload,crop,angular-file-upload,Angularjs,File Upload,Crop,Angular File Upload,我正在使用()裁剪图像,然后使用()将裁剪后的图像上载到服务器 我可以从ngImgCrop中的“on change”选项获取$dataURI。但我需要一个文件instace来调用$upload。 如何获取剪切图像的文件实例以便上载: $scope.upload = $upload.upload({ url: '/api/fileupload', file: [**file cropped here**] }).pro
$scope.upload = $upload.upload({
url: '/api/fileupload',
file: [**file cropped here**]
}).progress(function (evt) {
//
}).success(function (data, status, headers, config) {
//
});
尝试以下方法:
var uploader = $scope.uploader = new FileUploader({
url: '/saveImagePath',
autoUpload: false
});
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
上载程序不支持base64图像,因此需要将裁剪后的图像从base64转换为blob
function base64ToBlob(base64Data, contentType) {
contentType = contentType || '';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
在服务器端,有两种类型的文件,一种是作为HTML文件发布的,另一种是un base64,它是裁剪过的图像。我想你会在这个方法中找到正确的答案。我在Github的angular file upload issues页面()中找到了它:
我不知道它是否能正常工作,但似乎。如何从数据URI创建文件对象?嗨,伙计,我也面临同样的问题。正如我在这里解释的那样,我上传了裁剪后的图像,但是在服务器端获取可用图像时遇到了一些麻烦。图像似乎没有正确打开。你用angular文件上传解决了你的问题吗?我也将它用于其他目的,但如果它起作用,我也可以将它用于上传裁剪过的图像。无论如何谢谢你!不,我在服务器端做了裁剪。使用python枕头。嘿,伙计们,我成功了,检查我的更新!您能告诉我如何使用AngleSelect of angular file upload中的$files作为img裁剪的图像属性吗
$scope.submit = function () {
var file = base64ToBlob($scope.currentPortfolio.croppedImage.replace('data:image/png;base64,',''), 'image/jpeg');
uploader.addToQueue(file);
uploader.uploadAll();
};
/**
* Converts data uri to Blob. Necessary for uploading.
* @see
* http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
* @param {String} dataURI
* @return {Blob}
*/
var dataURItoBlob = function(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: mimeString});
};
var blob = dataURItoBlob($scope.croppedImage);