entrouvert/wcs
entrouvert
/
wcs
14
1
Fork 0
Code Issues Pull Requests 36 Releases Activity

misc: undo file orientation when resizing images (#73872)
gitea/wcs/pipeline/head This commit looks good Details

This commit is contained in:
Benjamin Dauvergne 2023-03-07 12:55:25 +01:00
parent 15051e2c2d
commit 28bac2af67
3 changed files with 1165 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
wcs/qommon/http_response.py
View File

@ -87,6 +87,7 @@ class HTTPResponse(quixote.http_response.HTTPResponse):
'jquery.js',
'jquery-ui.js',
'jquery.iframe-transport.js',
'exif.js',
'jquery.fileupload.js',
]
)

1064
wcs/qommon/static/js/exif.js Normal file
View File

File diff suppressed because it is too large Load Diff

140
wcs/qommon/static/js/qommon.fileupload.js
View File

@ -255,49 +255,109 @@ $.WcsFileUpload = {
var original_image_64 = e.target.result;
var img = document.createElement("img");
img.onload = function() {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 2000;
var MAX_HEIGHT = 2000;
var width = img.width;
var height = img.height;
if (width > height && width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
} else if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
if (img.width != width || img.height != height) {
canvas.width = width;
canvas.height = height;
var adapt_image = function(orientation) {
/*
* 1 = Horizontal (normal)
* 2 = Mirror horizontal
* 3 = Rotate 180
* 4 = Mirror vertical
* 5 = Mirror horizontal and rotate 270 CW
* 6 = Rotate 90 CW
* 7 = Mirror horizontal and rotate 90 CW
* 8 = Rotate 270 CW */
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
var new_image_64 = canvas.toDataURL('image/jpeg', 0.95);
var blob = null;
if (data.files[0].type == 'image/jpeg') {
blob = ExifRestorer.restore_as_blob(original_image_64, new_image_64);
blob.name = data.files[0].name;
} else {
// adapted from dataURItoBlob, from
// https://stackoverflow.com/questions/12168909/blob-from-dataurl#12300351
var byteString = atob(new_image_64.split(',')[1]);
var mimeString = new_image_64.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
blob = new Blob([ab], {type: mimeString});
blob.name = data.files[0].name + '.jpg';
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 2000;
var MAX_HEIGHT = 2000;
var width = img.width;
var height = img.height;
if (width > height && width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
} else if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
data.files[0] = blob;
if (img.width != width || img.height != height) {
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
switch (orientation) {
case 1:
break;
case 2:
ctx.translate(width, 0);
ctx.scale(-1, 1);
break;
case 3:
ctx.translate(width, height);
ctx.rotate(180 / 180 * Math.PI);
break;
case 4:
ctx.translate(0, height);
ctx.scale(1, -1);
break;
case 5:
canvas.width = height;
canvas.height = width;
ctx.rotate(90 / 180 * Math.PI);
ctx.scale(1, -1);
break;
case 6:
canvas.width = height;
canvas.height = width;
ctx.rotate(-90 / 180 * Math.PI);
ctx.translate(-width, 0);
break;
case 7:
canvas.width = height;
canvas.height = width;
ctx.rotate(270 / 180 * Math.PI);
ctx.translate(-width, height);
ctx.scale(1, -1);
break;
case 8:
canvas.width = height;
canvas.height = width;
ctx.translate(height, 0);
ctx.rotate(-270 / 180 * Math.PI);
break;
}
ctx.drawImage(img, 0, 0, width, height);
var new_image_64 = canvas.toDataURL('image/jpeg', 0.95);
var blob = null;
if (data.files[0].type == 'image/jpeg') {
blob = ExifRestorer.restore_as_blob(original_image_64, new_image_64);
blob.name = data.files[0].name;
} else {
// adapted from dataURItoBlob, from
// https://stackoverflow.com/questions/12168909/blob-from-dataurl#12300351
var byteString = atob(new_image_64.split(',')[1]);
var mimeString = new_image_64.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
blob = new Blob([ab], {type: mimeString});
blob.name = data.files[0].name + '.jpg';
}
data.files[0] = blob;
}
$(base_widget).find('.file-button').trigger('wcs:image-blob', data.files[0]);
return $.WcsFileUpload.upload(base_widget, data);
};
if (data.files[0].type == 'image/jpeg') {
EXIF.getData(img, function () {
var orientation = +EXIF.getTag(this, "Orientation");
adapt_image(orientation);
});
} else {
adapt_image(0);
}
$(base_widget).find('.file-button').trigger('wcs:image-blob', data.files[0]);
return $.WcsFileUpload.upload(base_widget, data);
}
img.src = e.target.result;
}