"Recadrer" et zoomer une image

11 juin 2018 à 17:02:21

Bonjour,

J'ai besoin d'afficher sur mon site web une image qui est assez grande et qui n'a pas besoin d'être vue en entier. J'aimerais créer une sorte de cadre (de taille fixe) où on verrait une partie de l’image. L'utilisateur pourrait attraper l'image et la "déplacer" pour voir une autre partie de l'image. Il pourrait également zoomer ou dézoomer l'image. Est-ce que vous voyez ce que je veux faire ?

Si oui, des idées sur comment faire ça ? Je ne sais même pas quels mots clés chercher pour trouver des pistes...

J'utilise Bootstrap pour le reste de ma page mais je n'ai pas vu d'éléments correspondants à ce que je veux faire.

Merci d'avance à tous !

leondie75

12 juin 2018 à 4:06:00

bonjour,

je ne comprends pas trop : tu veux faire cela : http://mark-rolich.github.io/Magnifier.js/ ?

zoomer une image ?

AmandineChatry

12 juin 2018 à 9:37:24

Un peu comme ça mais avec seulement l'image de droite, et pour se déplacer sur l'image il faudrait attraper l'image et la déplacer. Comme sur un plan en fait.

J'ai réussi à quelque chose qui marchait à peut près, mais il me reste encore quelques problèmes...

Le déplacement de l'image ne fonctionne pas à tous les coups, je ne comprend pas pourquoi...

Mon code :

Html

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" type="text/css" href="testZoom.css">
	</head>
	<body>
		<div id="textureImage" style="height:450px; width:1400px; overflow:hidden;">
			<img id="image" src="baseMat.png" width="1400px" height="450px" alt="Texture" > 
		</div>
		<script type="text/javascript" src="testZoom.js"></script>
	</body>
</html>

Javascript

var img = document.getElementById("image");
var xi, yi;

img.addEventListener('wheel', function(event) {
  var coef = 1;
  if(event.deltaY > 0){
    coef = 1.2;
  } else if(event.deltaY < 0 && img.offsetWidth >= 1400){
    coef = 0.8;
  }
  var newWidth = img.offsetWidth * coef;
  var newHeight = img.offsetHeight * coef;
  img.style.width = newWidth + 'px'; 
  img.style.height = newHeight + 'px'; 
});

img.addEventListener('mousedown', function(event) {
  console.log("Mousedown event");
  //console.log("X (down): " + getCursorPos(event).x);
  
  //img.style.marginLeft = img.style.marginLeft + "50px";
  xi = getCursorPos(event).x;
  yi = getCursorPos(event).y;
  console.log("X : " + xi);
  console.log("Y : " + yi);
});

img.addEventListener('mouseup', function(event) {
  // console.log("Mouseup event");
  //console.log("X (up) : " + getCursorPos(event).x);
  deltaX = getCursorPos(event).x - xi;
  deltaY = getCursorPos(event).y - yi;
  console.log("deltaX : " + deltaX);
  console.log("deltaY : " + deltaY);
  img.style.marginLeft = deltaX + 'px';
  img.style.marginTop = deltaY + 'px';
});

function getCursorPos(e) {
  var a, x = 0, y = 0;
  e = e || window.event;
  //get the x and y positions of the image:
  a = img.getBoundingClientRect();
  //calculate the cursor's x and y coordinates, relative to the image:
  x = e.pageX - a.left;
  y = e.pageY - a.top;
  //consider any page scrolling:
  x = x - window.pageXOffset;
  y = y - window.pageYOffset;
  return {x : x, y : y};
}

-
Edité par AmandineChatry 12 juin 2018 à 15:14:14