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.6 KiB
107 lines
3.6 KiB
{% extends "layout.html" %}
|
|
{% block title %}Crop Photo{% endblock %}
|
|
{% block content %}
|
|
|
|
<h1>Crop Photo</h1>
|
|
|
|
All versions of your photo except the largest one are cropped into a square
|
|
shape. You can use this page to modify the region of the photo you want to
|
|
crop.<p>
|
|
|
|
<table border="0" cellspacing="4" cellpadding="2">
|
|
<tr>
|
|
<td align="center" valign="middle">
|
|
<img src="{{ app['photo_url'] }}/{{ preview }}" id="cropbox">
|
|
</td>
|
|
<td align="center" valign="top">
|
|
<strong>Preview:</strong><br>
|
|
<div style="width: 100px; height: 100px; overflow: hidden">
|
|
<img src="{{ app['photo_url'] }}/{{ preview }}" id="preview" style="max-width: none">
|
|
</div>
|
|
<p>
|
|
|
|
<form name="crop" action="{{ url_for('photo.crop', photo=photo) }}" method="POST">
|
|
<input type="hidden" name="token" value="{{ csrf_token() }}">
|
|
<input type="hidden" name="x" id="x" value="0">
|
|
<input type="hidden" name="y" id="y" value="0">
|
|
<input type="hidden" name="length" id="length" value="0">
|
|
|
|
<button type="submit">Crop Photo!</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="/js/jquery.Jcrop.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/css/jquery.Jcrop.css">
|
|
<script>
|
|
$(document).ready(function() {
|
|
var $cropbox = $("#cropbox"),
|
|
$preview = $("#preview"),
|
|
$x = $("#x"),
|
|
$y = $("#y"),
|
|
$length = $("#length");
|
|
|
|
// Find the shortest side.
|
|
var len;
|
|
if ($cropbox.width() > $cropbox.height()) {
|
|
len = $cropbox.height();
|
|
}
|
|
else {
|
|
len = $cropbox.width();
|
|
}
|
|
|
|
// Jcrop handler.
|
|
var showPreview = function(coords) {
|
|
if (parseInt(coords.w) > 0) {
|
|
var rx = 100 / coords.w;
|
|
var ry = 100 / coords.h;
|
|
var ht = $cropbox.height();
|
|
var wt = $cropbox.width();
|
|
|
|
// Make the coords into percentages, so it works on mobile.
|
|
|
|
// Get the true dimensions of the image from PIL.
|
|
var trueW = {{ true_width }};
|
|
var trueH = {{ true_height }};
|
|
|
|
// The actual (possibly scaled) image shown on the page is hereby called
|
|
// the "display image"... turn our "display coords" into percentages
|
|
// across the image.
|
|
var percentX = coords.x / wt;
|
|
var percentY = coords.y / ht;
|
|
var percentLen = coords.w / wt;
|
|
|
|
// Now get our true coords by multiplying those percentages against the
|
|
// true dimensions of the image from PIL.
|
|
var trueX = trueW * percentX;
|
|
var trueY = trueH * percentY;
|
|
var trueLen = trueW * percentLen;
|
|
|
|
// Update the preview.
|
|
$preview.css({
|
|
width: Math.round(rx * wt) + "px",
|
|
height: Math.round(ry * ht) + "px",
|
|
marginLeft: "-" + Math.round(rx * coords.x) + "px",
|
|
marginTop: "-" + Math.round(ry * coords.y) + "px"
|
|
})
|
|
|
|
// Update the form.
|
|
$x.val(parseInt(trueX));
|
|
$y.val(parseInt(trueY));
|
|
$length.val(parseInt(trueLen));
|
|
}
|
|
}
|
|
|
|
$cropbox.Jcrop({
|
|
onChange: showPreview,
|
|
onSelect: showPreview,
|
|
aspectRatio: 1,
|
|
setSelect: [ 0, 0, len, len ],
|
|
})
|
|
});
|
|
</script>
|
|
{% endblock %}
|