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

Utiliser exif.js pour inverser l'orientation appliquée par canva.drawImage() (#73872) #154

Merged
bdauvergne merged 1 commits from wip/73872-Reorientation-d-une-image-suite into main 2023-03-17 00:07:33 +01:00
Conversation 0 Commits 1 Files Changed 3 +1165 -40
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

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

@ -255,6 +255,16 @@ $.WcsFileUpload = {
var original_image_64 = e.target.result;
var img = document.createElement("img");
img.onload = function() {
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);
@ -275,6 +285,47 @@ $.WcsFileUpload = {
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;
@ -298,6 +349,15 @@ $.WcsFileUpload = {
}
$(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);
}
}
img.src = e.target.result;
}