A Python content management system designed for kirsle.net featuring a blog, comments and photo albums. https://rophako.kirsle.net/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

107 lines
3.7 KiB

  1. {% extends "layout.html" %}
  2. {% block title %}Crop Photo{% endblock %}
  3. {% block content %}
  4. <h1>Crop Photo</h1>
  5. All versions of your photo except the largest one are cropped into a square
  6. shape. You can use this page to modify the region of the photo you want to
  7. crop.<p>
  8. <table border="0" cellspacing="4" cellpadding="2">
  9. <tr>
  10. <td align="center" valign="middle">
  11. <img src="{{ app['photo_url'] }}/{{ preview }}" id="cropbox">
  12. </td>
  13. <td align="center" valign="top">
  14. <strong>Preview:</strong><br>
  15. <div style="width: 100px; height: 100px; overflow: hidden">
  16. <img src="{{ app['photo_url'] }}/{{ preview }}" id="preview" style="max-width: none">
  17. </div>
  18. <p>
  19. <form name="crop" action="{{ url_for('photo.crop', photo=photo) }}" method="POST">
  20. <input type="hidden" name="token" value="{{ csrf_token() }}">
  21. <input type="hidden" name="x" id="x" value="0">
  22. <input type="hidden" name="y" id="y" value="0">
  23. <input type="hidden" name="length" id="length" value="0">
  24. <button type="submit" class="btn btn-primary">Crop Photo!</button>
  25. </form>
  26. </td>
  27. </tr>
  28. </table>
  29. {% endblock %}
  30. {% block scripts %}
  31. <script src="/js/jquery.Jcrop.min.js"></script>
  32. <link rel="stylesheet" type="text/css" href="/css/jquery.Jcrop.css">
  33. <script>
  34. $(document).ready(function() {
  35. var $cropbox = $("#cropbox"),
  36. $preview = $("#preview"),
  37. $x = $("#x"),
  38. $y = $("#y"),
  39. $length = $("#length");
  40. // Find the shortest side.
  41. var len;
  42. if ($cropbox.width() > $cropbox.height()) {
  43. len = $cropbox.height();
  44. }
  45. else {
  46. len = $cropbox.width();
  47. }
  48. // Jcrop handler.
  49. var showPreview = function(coords) {
  50. if (parseInt(coords.w) > 0) {
  51. var rx = 100 / coords.w;
  52. var ry = 100 / coords.h;
  53. var ht = $cropbox.height();
  54. var wt = $cropbox.width();
  55. // Make the coords into percentages, so it works on mobile.
  56. // Get the true dimensions of the image from PIL.
  57. var trueW = {{ true_width }};
  58. var trueH = {{ true_height }};
  59. // The actual (possibly scaled) image shown on the page is hereby called
  60. // the "display image"... turn our "display coords" into percentages
  61. // across the image.
  62. var percentX = coords.x / wt;
  63. var percentY = coords.y / ht;
  64. var percentLen = coords.w / wt;
  65. // Now get our true coords by multiplying those percentages against the
  66. // true dimensions of the image from PIL.
  67. var trueX = trueW * percentX;
  68. var trueY = trueH * percentY;
  69. var trueLen = trueW * percentLen;
  70. // Update the preview.
  71. $preview.css({
  72. width: Math.round(rx * wt) + "px",
  73. height: Math.round(ry * ht) + "px",
  74. marginLeft: "-" + Math.round(rx * coords.x) + "px",
  75. marginTop: "-" + Math.round(ry * coords.y) + "px"
  76. })
  77. // Update the form.
  78. $x.val(parseInt(trueX));
  79. $y.val(parseInt(trueY));
  80. $length.val(parseInt(trueLen));
  81. }
  82. }
  83. $cropbox.Jcrop({
  84. onChange: showPreview,
  85. onSelect: showPreview,
  86. aspectRatio: 1,
  87. setSelect: [ 0, 0, len, len ],
  88. })
  89. });
  90. </script>
  91. {% endblock %}