Annonce
#1 Wed 14 August 2024 13:27
- jfav
- Juste Inscrit !
- Date d'inscription: 22 Sep 2023
- Messages: 6
QGIS: Utilisation de JS dans une infobulle HTML
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"></script>
</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
Hors ligne
