14 Aug
2024
14 Aug
'24
1:27 p.m.
Message posté par : jfav
----------------------------------------
Bonjour,
Dans mon projet QGIS, je souhaite pouvoir afficher une infobulle HTML qui montre
l'image au survole de ma couche. Pour cela, j'ai créé une requête HTML qui
fonctionne très bien (bien que peut-être pas très élégante?):
-----------------
Code :
<a href="[% concat('file:///', replace(@project_home, '\\',
'/'), '/', replace("photo", '\\', '/')) %]"
target="_blank">
<img src="[% concat('file:///', replace(@project_home, '\\',
'/'), '/', replace("photo", '\\', '/')) %]"
alt="Image" style="width:200px;"/>
</a>
-----------------
Comme vous pouvez le voir, j'ai créer un balise ancre afin de pouvoir ouvrir
l'image en cliquant sur mon infobulle. Jusqu'à la, tout va bien.
Mon soucis est que l'image est mal orientée quand je survole ma couche. Alors
qu'elle est bien orientée lors de l'ouverture du fichier. Pour gérer cela,
j'ai créer un fichier JS qui lis les données EXIF de l'image, et qui lui effectue
une rotation si besoin. Le code est le suivant:
-----------------
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Image Rotation Correction</title>
<style>
img {
width: 200px;
display: block;
margin: 0 auto;
}
</style>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js&…
</head>
<body>
<a id="image-link" href="file:///..."
target="_blank">
<img id="image" src="file:///..."
alt="Image"/>
</a>
<script>
document.addEventListener('DOMContentLoaded', function() {
function correctImageOrientation(imageElement, imageUrl) {
const img = new Image();
img.src = imageUrl;
img.onload = function () {
EXIF.getData(img, function () {
const orientation = EXIF.getTag(this, 'Orientation');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Check the orientation and adjust canvas size
if (orientation === 6 || orientation === 8) {
canvas.width = img.height;
canvas.height = img.width;
} else {
canvas.width = img.width;
canvas.height = img.height;
}
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
before drawing
// Apply rotation and draw image
switch (orientation) {
case 3: // 180° rotation
ctx.rotate(Math.PI);
ctx.drawImage(img, -img.width, -img.height);
break;
case 6: // 90° rotation
ctx.rotate(Math.PI / 2);
ctx.drawImage(img, 0, -img.height);
break;
case 8: // -90° rotation
ctx.rotate(-Math.PI / 2);
ctx.drawImage(img, -img.width, 0);
break;
default:
ctx.drawImage(img, 0, 0);
break;
}
// Update the image element with the corrected image
imageElement.src = canvas.toDataURL();
});
};
}
// URL from QGIS expression
const imageUrl = document.getElementById('image').src;
const imageElement = document.getElementById('image');
const imageLink = document.getElementById('image-link');
imageLink.href = imageUrl;
correctImageOrientation(imageElement, imageUrl);
});
</script>
</body>
</html>
-----------------
L'exectution du code dans un navigateur fonctionne parfaitement et l'image est
bien orientée. Sauf que cela ne fonctionne pas sur QGIS...
Je me demande si le JS ne peut pas être interprété par QGIS? Auriez-vous une solution à
mon problème?
Merci d'avance !
Cordialement
Jeremie
----------------------------------------
Le message est situé https://georezo.net/forum/viewtopic.php?pid=369023#p369023
Pour y répondre : qgis_fr(a)ml.georezo.net ou reply de votre messagerie
Pour vous désabonner connectez-vous sur le forum puis Profil / Abonnement
--
Association GeoRezo - le portail géomatique
https://georezo.net