template/cropper.html //自定义标签
<div id="item" ng-show="size ==='sm' " class="cropme" style="width: 200px; height: 200px;"></div>
.directive('cropper', [function () {
return {
restrict: 'AE',
replace: true,
templateUrl: 'template/apple/cropper/cropper.html',
scope:{
size:'='
},
link: function (scope) {
$('.cropme').simpleCropper();
}
};
}])
所依赖的js // jquery.Jcrop.js, jquery.SimpleCropper.js
html只需要写:
<cropper size="'sm'"></cropper>
<button class="btn btn-primary" ng-click="uploadFile()">上传</button>
<button class="btn btn-default" ng-click="removeimg()">移除</button>
size 是图片的尺寸 可以自己设置哦。
这是上传图片的方法 用到了 angularfileUpdate。
注 :文件上传时要添加依赖注入。
$scope.uploadFile = function () {
var file = $("#imglogo").attr("src");//base64.
console.log($scope.convertBase64UrlToBlob(file));//blob文件
$upload.upload({
url: config.backend.ip+"file/upload",
method: "POST",
headers: {
},
data: {},
file:$scope.convertBase64UrlToBlob(file)
})
.progress(function (evt) {
})
.success(function (data) {
$scope.growl(data.message,'success');
})
.error(function (e, code) {
$scope.growl(e,'error');
});
};
$scope.convertBase64UrlToBlob = function(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
};
图片裁剪的原理 ,
把现有图片经过区域的选择,最后append一个img标签 src是裁剪后的base:64码 ,
上传文件是通过base:64 码转换成blob文件格式实现文件上传。