我正在使用ngImgCrop插件进行图片裁剪并发布到我的休息服务。像这样的HTML:
<form>
<button class="btn btn-default fileUpload" type="submit"><span>from pc</span>
<input type="file"
id="fileInput"
class="upload"
onchange="angular.element(this).scope().uploadFile(this.files[0])"/></button>
<button class="btn btn-default" type="submit">from camera</button>
<div class="cropArea">
<img-crop image="image.myImage" result-image="image.myCroppedImage"></img-crop>
</div>
<div class="hidden"><img ng-src="{{image.myCroppedImage}}" ng-model="updatedPhoto" /></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closeThisDialog(value)">Close
</button>
<button type="submit" ng-click="updatePhoto()" class="btn btn-primary">Save</button>
</form>
和controller.js:
$scope.updatePhoto = function () {
var updatedPhotoLink = {
file: file
};
$http({
method: 'POST',
data: updatedPhotoLink,
url: '//myapiservices.com/upload'
}).then(function successCallback(response) {
console.log(response);
}, function errorCallback(response) {
console.log("error");
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
是的,它可以工作,但图像链接由base64返回,但API链接想要通过文件。
我尝试添加更改:
var imageBase64 = $scope.image.myCroppedImage;
var blob = new Blob([imageBase64], {type: 'image/png'});
但是它不起作用,图像文件返回空白。如何将base64网址转换为文件?感谢。
答案 0 :(得分:3)
结帐this link。
function getBase64Image(base64string) {
return base64string.replace(/^data:image\/(png|jpg);base64,/, "");
}
var imgData = JSON.stringify(getBase64Image(/* base64string */));
$.ajax({
url: 'http://url.com/rest/api',
dataType: 'json',
data: imgData,
type: 'POST',
success: function(data) {
console.log(data);
}
});
这是将图像base64上传到服务器的示例, 它对你所做的事情有点不同,但它可以解决问题。
而不是发送图像的href,而不是在转换base64的开头没有元数据的情况下只发送base64。您定义为contentType:json
并将其发送到服务器。
在服务器端你得到base64(它实际上是一个表示位数组的字符串)并将其转换为图像(php convert base64)
答案 1 :(得分:2)
尝试以下方法:
<img data-ng-src="data:image/png;base64,{{image.myCroppedImage}}" ng-model="updatedPhoto" />
答案 2 :(得分:1)
$scope.uploadFileCropper = function () {
debugger;
var imageBase64 = $(".cropped")[0].src;
var blob = this.dataURItoBlob(imageBase64);
var blobimage = new File([blob], 'image.png');
if (blobimage != "") {
var file = blobimage;
var payload = new FormData();
payload.append("file", file);
//data.my_imageurl = $(".cropped")[0].src;
uploadSUFileService.uploadFile('your API Route', payload).then(function (response) {
$(".MKloader").fadeOut("slow");
if (response.status == 200) {
$scope.ProductLines.my_imageurl = response.data;
document.getElementById('image').src = $scope.ProductLines.my_imageurl;
$scope.updatedataimageURl();
} else if (response.status == 203) {
console.log(status);
location.replace("/Signin");
} else if (response.status == 204) {
console.log(status);
alert("Record not updated")
}
}).catch(function (response) {
console.log(response);
$(".MKloader").fadeOut("slow");
});
}
}
$scope.dataURItoBlob = function (dataURI) {
var byteString = atob(dataURI.toString().split(',')[1]);
//var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ab], { type: 'image/png' }); //or mimeString if you want
return blob;
}
答案 3 :(得分:0)
你添加了这个:
var imageBase64 = $scope.image.myCroppedImage;
var blob = new Blob([imageBase64], {type: 'image/png'});
现在有些变化:
var imageBase64 = $scope.image.myCroppedImage;
var blob = this.dataURItoBlob(imageBase64);
var image = new File([blob], 'image.png');
并添加此功能:
dataURItoBlob(dataURI) {
var byteString = atob(dataURI.toString().split(',')[1]);
//var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ab], {type: 'image/png'}); //or mimeString if you want
return blob;
}