0

I am using ngImgCrop, for Image cropping, but the resulting image is base64 encoded, while the endpoint where I'm going to post supports only multipart-form-data. I'm confused how can I convert it into normal image.

Angular Plugin: ngImgCrop

My HTML code:

        <div>Select an image file: <input type="file" id="fileInput" /></div>
        <div class="cropArea" style="background: #E4E4E4; overflow: hidden; width:500px; height:350px;">
            <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
        </div>
        <div>Cropped Image:</div>
        <img ng-src="{{myCroppedImage}}"/>
        <button ng-click="convertImage(myCroppedImage)">Upload Image</button>

In angular Controller:

$scope.convertImage = function(imgBase64){
                    var image = new Image();
                    var Base64 = {_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}};
                    image = Base64.decode(imgBase64);
                    console.log(image);
                    image.src = imgBase64;
                    image.name="random";
                    console.log(image);
                    $scope.upload(image);
                };

                var handleFileSelect = function(evt) {
                    var file = evt.currentTarget.files[0];
                    var reader = new FileReader();
                    reader.onload = function (evt) {
                        $scope.$apply(function($scope){
                            console.log(evt.target.result);
                            $scope.myImage = evt.target.result;
                        });
                    };
                    reader.readAsDataURL(file);
                    console.log(reader);
                };
                angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  • I think without server side code you cannot convert base64 to normal image – syms Apr 22 '15 at 12:27
  • I can't understand this, If JS can convert Image to Base64 then why not Base64 to Image...? Confused... – Muhammad Mehdi Raza Apr 22 '15 at 12:32
  • I think image meance you want physical image lying on file system but js cann't access file system, only ie with activex object can access it. so your cropped image cann't be written back to file system – syms Apr 22 '15 at 12:34
  • Check this: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata – Swati Pardeshi Apr 12 '16 at 10:18

0 Answers0