Simple HTML 5 canvas to realize the magnifying effect of Taobao merchandise

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.bigdiv{
			position: relative;
			width: 400px;
			height: 400px;
			margin-left: 130px;
			margin-top: 120px;
		}
		canvas{
			border: 1px solid red;
		}
		#bigcan{
			position: absolute;
			top: 100px;
			left: 400px;
			display: none;

		}
		#bdpic{
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0.5;
			display: none;
		}
		/*#piccan*/

	</style>
	<script>
		window.onload = function(){
			var bigdiv = document.getElementsByClassName('bigdiv')[0];
			var canvas = document.getElementById('piccan');
			var context = canvas.getContext('2d');

			var bigcanvas = document.getElementById('bigcan');
			var bigcontext = bigcanvas.getContext('2d');

			var bdcanvas = document.getElementById('bdpic');
			var bdcontext = bdcanvas.getContext('2d');

			//Big picture
			var image = new Image();
			image.src = 'image/Liu Yifei.jpg';
			image.onload = function(){
				context.drawImage(image,0,0,400,400);
			}
			//Wave point pictures
			var bdimg = new Image();
			bdimg.src = 'image/Wave point.jpg'
			bdimg.onload = function(){
				bdcontext.drawImage(bdimg,0,0,100,100);
			}
			canvas.onmousemove = function(event){
				var x = event.pageX - bigdiv.offsetLeft -50;
				var y = event.pageY - bigdiv.offsetTop -50;
				console.log(x,y);
				if(x<0){
					x = 0
				}else if(x>300){
					x = 300;
				}else{
					var x = event.pageX - bigdiv.offsetLeft -50;
				}

				if(y<0){
					y = 0
				}else if(y>300){
					y = 300;
				}else{
					var y = event.pageY - bigdiv.offsetTop -50;
				}
				
				//clientX is the viewport location pageX is the location of the page document. The latter is used to scroll the screen X cursor in the screen position.
				bigcontext.clearRect(0,0,200,200);
				bigcontext.drawImage(canvas,x,y,100,100,0,0,200,200);
				bdpic.style.display = 'block';
				bigcanvas.style.display = 'block';
				bdpic.style.left = x +'px';
				bdpic.style.top = y + 'px';
			}
			bigdiv.onmouseleave = function(){
				bigcanvas.style.display = 'none';
				bdpic.style.display = 'none';
			}

		}
	</script>
</head>
<body>
	<div class="bigdiv">
		//Bottom Level Liu Yifei Pictures
		<canvas id="piccan" width="400px" height="400px"> </canvas>
		//Wave point pictures
		<canvas id="bdpic" width="100px" height="100px "></canvas>
		//Magnifier image
		<canvas id="bigcan" width="200px" height="200px"></canvas>
	</div>
</body>
</html>

Here we use three canvas implementations, one is the bottom image, one is the surface of a translucent wave point image (Baidu search wave point image can be), and one is the magnifying glass display place.
The effect of the whole code implementation is as follows:
Mouse movement is basically understood, as long as it is the understanding of drawImage:
Parameters: image object, the position of the x-coordinate at which the image is cut, the position of the y-coordinate at which the image is cut, the width of the cut image, the height of the cut image, the starting x-coordinate at which the position is drawn, the starting y-coordinate at which the image is drawn, the width and height at which the magnifying glass is drawn, can be understood.
Comparing with the original situation, there will be blank:
This shows that the screenshot effect is not limited to the canvas, at this time we can add in the js code:

				if(x<0){
					x = 0
				}else if(x>300){
					x = 300;
				}else{
					var x = event.pageX - bigdiv.offsetLeft -50;
				}

				if(y<0){
					y = 0
				}else if(y>300){
					y = 300;
				}else{
					var y = event.pageY - bigdiv.offsetTop -50;
				}

The idea is to limit the position of your mouse when these blank positions appear. When you are larger or smaller than a value, you can change the value of x to achieve a perfect magnification effect.

Posted on Fri, 11 Oct 2019 10:01:15 -0700 by ozzthegod