form_imagecrop.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334
  1. <div class="bg-light lter b-b wrapper-md">
  2. <h1 class="m-n font-thin h3">Image Crop</h1>
  3. </div>
  4. <div class="wrapper-md" ng-controller="ImgCropCtrl">
  5. <div class="m-b">
  6. Select an image file
  7. <input type="file" id="fileInput" />
  8. </div>
  9. <div class="hbox hbox-auto-xs">
  10. <div class="col">
  11. <div class="wrapper-sm b-a bg-white m-r-xs m-b-xs">
  12. <div class="bg-light" style="height:320px">
  13. <img-crop
  14. image="myImage"
  15. result-image="myCroppedImage"
  16. result-image-size="160"
  17. area-type="{{cropType}}"
  18. ></img-crop>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="col">
  23. <div class="inline bg-white wrapper-sm b-a">
  24. <div class="bg-light">
  25. <img ng-src="{{myCroppedImage}}" />
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="btn-group m-t">
  31. <label class="btn btn-default" ng-model="cropType" btn-radio="'circle'">Circle</label>
  32. <label class="btn btn-default" ng-model="cropType" btn-radio="'square'">Square</label>
  33. </div>
  34. <div>