Question

通过使用以下程序获取生成的裁剪图像。我将在ng-src =＆＃34; {{myCroppedImage}}＆＃34;中获得结果图像。这个图像我需要upload.how我可以通过使用jsp action将该图像上传到我的服务器。请帮助我

<html>
                <head><script src="js/angular.min.js"></script>
                <script src="js/angular-route.min.js"></script>
                  <script src="js/ng-img-crop.js"></script>
                  <script src="js/init.js"></script>
                  <link rel="stylesheet" type="text/css" href="css/ng-img-crop.css">
                  <style>
                    .cropArea {
                  background: #E4E4E4;
                  overflow: hidden;
                  width:200px;
                  height:200px;
                }
                  </style>
                  <script>
                  angular.module('app', ['ngImgCrop'])
                  .controller('Ctrl', function($scope) {
                    $scope.myImage='';
                    $scope.myCroppedImage='';

                    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);
                    };            angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
    });
    </script>
                </head>
    <form action="upload.jsp" method="post>
                <body ng-app="app" ng-controller="Ctrl">
                  <div>Select an image file: <input type="file" id="fileInput" /></div>
                  <div class="cropArea">
                    <img-crop image="myImage" area-type="rectangle" result-image="myCroppedImage" result-image-size="400"></img-crop>
                  </div>
                  <div>Cropped Image:</div>
                  <div><img ng-src="{{myCroppedImage}}" /></div>
                </body></form>
                </html>

Answer 1

我知道你现在可能已经知道了，但是为了将来参考这些答案的其他人参考，这里是我如何做到这一点的快速示例。需要考虑的一件事是，如果没有最新的HTML5支持，它在旧浏览器中不起作用。无论如何，它为我做了诀窍。

顺便说一句，这里有一些参考资料帮助我https://gist.github.com/brianfeister/56a1c6c77cd5928a1c53和https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

＆＃13;

// Assuming we have the crop result in myCroppedImage
// Get the mime part of it
var mimeString = $scope.myCroppedImage.split(',')[0].split(':')[1].split(';')[0];
// Get the data part and decode it
var dataString = window.atob($scope.myCroppedImage.split(',')[1]);
var dataArray = [];

for(var i = 0; i < dataString.length; i++)
{
	dataArray.push(dataString.charCodeAt(i));
}

var imageData = new Blob([new Uint8Array(dataArray)], {type: mimeString});
var fd = new FormData();

fd.append('file', imageData);

$http({
  url: 'your/upload/script/url',
  method: 'POST',
  data: fd,
  transformRequest: angular.identity,
  headers: {'Content-Type': undefined}
})
  .success(yourSuccessCallback)
  .error(yourErrorCallback);

＆＃13;

如何上传一个angularjs ng-crop导致裁剪的图像到服务器？

1 个答案: