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文件格式实现文件上传。