i trying convert id="send_to_db" image canvas form , send php have googled alto particulate cropped image dint find use full code, there way convert image after cropped , displayed on image ,that particulate image create blob form , send php through ajax
fiddel:example
js:
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); }); css:
.croparea { background: #e4e4e4; overflow: hidden; width:500px; height:350px; } html:
<link href="https://cdn.rawgit.com/alexk111/ngimgcrop/master/compile/minified/ng-img-crop.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <body ng-app="app" ng-controller="ctrl"> <div>select image file: <input type="file" id="fileinput" /></div> <div class="croparea"> <img-crop image="myimage" result-image="mycroppedimage"></img-crop> </div> <div>cropped image:</div> <div><img id="send_to_db" ng-src="{{mycroppedimage}}" /></div> </body>
Comments
Post a Comment