add crop test ui (e7a1395d) · Commits · certic / Jama

jama/urls.py

+1 −0

Original line number	Diff line number	Diff line
		@@ -21,6 +21,7 @@ urlpatterns = [
		path(settings.JAMA_URL_BASE_PATH + "", views.homepage),
		path(settings.JAMA_URL_BASE_PATH + "rpc/", include("rpc.urls")),
		path(settings.JAMA_URL_BASE_PATH + "oai/", include("oai.urls")),
		path(settings.JAMA_URL_BASE_PATH + "resources/", include("resources.urls")),
		path(settings.JAMA_URL_BASE_PATH + "status", views.status),
		]

requirements.txt

+2 −1

Original line number	Diff line number	Diff line
		@@ -8,3 +8,4 @@ markdown2
		python-dotenv
		unidecode
		django-ranged-fileresponse
		pyvips
		No newline at end of file

resources/urls.py

+7 −1

Original line number	Diff line number	Diff line
		@@ -2,4 +2,10 @@ from django.urls import path

		from . import views

		urlpatterns = []
		urlpatterns = [
		path("test/", views.test),
		path(
		"thumb/<str:sha256>/rotate/<str:angle>/scale/<str:scale>/crop/<str:crop>",
		views.thumb,
		),
		]

resources/views.py

+57 −3

Original line number	Diff line number	Diff line
		from django.http import (
		HttpRequest,
		HttpResponseNotFound,
		HttpResponseBadRequest,
		FileResponse,
		HttpResponse,
		)
		from django.shortcuts import render
		from django.http import HttpRequest, HttpResponse
		from django.contrib.auth.decorators import login_required
		from resources.helpers import handle_uploaded_file, UnknownFileType
		import pyvips
		import tempfile
		from resources.models import File
		import os.path
		from typing import Union


		def thumb(
		request: HttpRequest, sha256: str, angle: float, scale: float, crop: str
		) -> Union[FileResponse, HttpResponseNotFound, HttpResponseBadRequest]:
		pic_file = File.objects.filter(hash=sha256).first()
		if not pic_file:
		return HttpResponseNotFound("Not Found")
		try:
		top, right, bottom, left = crop.split(",")
		top = int(top)
		right = int(right)
		bottom = int(bottom)
		left = int(left)
		angle = float(angle)
		scale = float(scale)
		if angle > 360 or angle < 0 or scale < 0 or scale > 1:
		raise ValueError
		except ValueError:
		return HttpResponseBadRequest("Bad Request")
		tmp_pic_path = "{}/thumb-{}-{}-{}-{}-{}-{}-{}.jpg".format(
		tempfile.gettempdir(), sha256, angle, scale, top, right, bottom, left
		)
		# if not os.path.isfile(tmp_pic_path):
		if True:
		crop_color = [224, 224, 224]
		img = pyvips.Image.new_from_file(pic_file.local_path())
		if angle:
		img = img.rotate(angle)
		img = img.draw_rect(crop_color, 0, 0, left, img.height, fill=True)
		img = img.draw_rect(crop_color, 0, 0, img.width, top, fill=True)
		img = img.draw_rect(
		crop_color, 0, img.height - bottom, img.width, bottom, fill=True
		)
		img = img.draw_rect(
		crop_color, img.width - right, 0, right, img.height, fill=True
		)
		img = img.resize(scale)
		img.write_to_file(tmp_pic_path)
		return FileResponse(open(tmp_pic_path, "rb"))


		def test(request: HttpRequest) -> HttpResponse:
		f = File.objects.filter(file_type__mime__contains="image/").last()
		return render(request, "resources/test.html", {"hash": f.hash})

templates/resources/test.html

0 → 100644

+77 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="fr">
		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Rotate/Crop Test</title>
		<style>
		input{
		width: 100%;
		}
		</style>
		</head>
		<body>
		<h1>Rotate & Crop Test</h1>
		<form>
		<fieldset>
		<legend>Params</legend>
		<table>
		<tr>
		<td><label for="hash">Resource Hash</label></td>
		<td><input id="hash" type="text" value="{{ hash }}"/></td>
		</tr>
		<tr>
		<td><label for="scale">Scale</label></td>
		<td><input id="scale" type="number" max="1.0" min="0.0" value="0.2"/></td>
		</tr>
		<tr>
		<td><label for="rotation">Rotation</label></td>
		<td><input id="rotation" type="number" max="360.0" min="0.0" value="0.0"></td>
		</tr>
		<tr>
		<td><label for="top_margin">Top Margin</label></td>
		<td><input id="top_margin" type="number" value="0"></td>
		</tr>
		<tr>
		<td><label for="right_margin">Right Margin</label></td>
		<td><input id="right_margin" type="number" value="0"></td>
		</tr>
		<tr>
		<td><label for="bottom_margin">Bottom Margin</label></td>
		<td><input id="bottom_margin" type="number" value="0"></td>
		</tr>
		<tr>
		<td><label for="left_margin">Left Margin</label></td>
		<td><input id="left_margin" type="number" value="0"></td>
		</tr>
		</table>
		</fieldset>
		</form>
		<div style="margin-top: 2em;">
		<img id="show" src="/resources/thumb/{{ hash }}/rotate/0/scale/0.2/crop/0,0,0,0">
		</div>
		<script>
		let hash_in = document.getElementById("hash");
		let scale_in = document.getElementById("scale");
		let rotation_in = document.getElementById("rotation");
		let top_in = document.getElementById("top_margin");
		let right_in = document.getElementById("right_margin");
		let bottom_in = document.getElementById("bottom_margin");
		let left_in = document.getElementById("left_margin");
		let show = document.getElementById("show");

		function refreshCanvas(){
		let pic_url = `/resources/thumb/${hash_in.value}/rotate/${rotation_in.value}/scale/${scale_in.value}/crop/${top_in.value},${right_in.value},${bottom_in.value},${left_in.value}`;
		show.src = pic_url;
		}

		hash_in.addEventListener("change", refreshCanvas);
		scale_in.addEventListener("change", refreshCanvas);
		rotation_in.addEventListener("change", refreshCanvas);
		top_in.addEventListener("change", refreshCanvas);
		right_in.addEventListener("change", refreshCanvas);
		bottom_in.addEventListener("change", refreshCanvas);
		left_in.addEventListener("change", refreshCanvas);
		</script>
		</body>
		</html>
		No newline at end of file