Creating an Image Zoomer in Html5 Canvas

On 12.06.16, In Computers, by Samuelson Bechinewhu

Creating an Image Zoomer in HTML5 Canvas.

Step 1. HTML

Here are html code of our color picker page

index.html

01	<!DOCTYPE html>

02	<html lang=”en” >

03

<head>

04	<meta charset=”utf-8″ />

05	<title>HTML5 canvas – Image zoomer \| Script Tutorials</title>

06	<link href=”css/main.css” rel=”stylesheet” type=”text/css” />

07	<script type=”text/javascript” src=”js/jquery-1.5.2.min.js”></script>

08	<script type=”text/javascript” src=”js/script.js”></script>

09

</head>

10

<body>

11	<div class=”container”>

12	<canvas id=”panel” width=”800″ height=”533″></canvas>

13

</div>

14

15	<h2>HTML5 canvas – Image zoomer</h2>

16	<a href=”http://www.script-tutorials.com/html5-canvas-image-zoomer/” class=”stuts”>Back to original tutorial on <span>Script Tutorials</span></a>

17

</footer>

18

</body>

19

</html>

Step 2. CSS

Here are used CSS styles

css/main.css

01

*{

02

margin:0;

03	padding:0;

04

}

05

06

body {

07	background-color:#bababa;

08	color:#fff;

09	font:14px/1.3 Arial,sans-serif;

10

}

11

12

footer {

13	background-color:#212121;

14

bottom:0;

15	box-shadow: 0 -1px 2px #111111;

16	display:block;

17	height:70px;

18

left:0;

19	position:fixed;

20	width:100%;

21	z-index:100;

22

}

23

24	footer h2{

25	font-size:22px;

26	font-weight:normal;

27

left:50%;

28	margin-left:-400px;

29	padding:22px 0;

30	position:absolute;

31	width:540px;

32

}

33

34	footer a.stuts,a.stuts:visited{

35	border:none;

36	text-decoration:none;

37	color:#fcfcfc;

38	font-size:14px;

39

left:50%;

40	line-height:31px;

41	margin:23px 0 0 110px;

42	position:absolute;

43

top:0;

44

}

45

46	footer .stuts span {

47	font-size:22px;

48	font-weight:bold;

49	margin-left:5px;

50

}

51

52	.container {

53	color:#000;

54	margin:20px auto;

55	position:relative;

56	width:800px;

57

}

58

59

#panel {

60	border:1px #000 solid;

61	box-shadow:4px 6px 6px #444444;

62	cursor:crosshair;

63

}

Step 3. JS

js/script.js

01	// variables

02	var canvas, ctx;

03	var image;

04	var iMouseX, iMouseY = 1;

05	var bMouseDown = false;

06	var iZoomRadius = 100;

07	var iZoomPower = 2;

08

09	// drawing functions

10	function clear() { // clear canvas function

11	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

12

}

13

14	function drawScene() { // main drawScene function

15	clear(); // clear canvas

16

17	if (bMouseDown) { // drawing zoom area

18	ctx.drawImage(image, 0 – iMouseX * (iZoomPower – 1), 0 – iMouseY * (iZoomPower – 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);

19	ctx.globalCompositeOperation = ‘destination-atop’;

20

21	var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);

22	oGrd.addColorStop(0.8, “rgba(0, 0, 0, 1.0)”);

23	oGrd.addColorStop(1.0, “rgba(0, 0, 0, 0.1)”);

24	ctx.fillStyle = oGrd;

25	ctx.beginPath();

26	ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);

27	ctx.closePath();

28	ctx.fill();

29

}

30

31	// draw source image

32	ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);

33

}

34

35	$(function(){

36	// loading source image

37	image = new Image();

38	image.onload = function () {

39

}

40	image.src = ‘images/image.jpg’;

41

42	// creating canvas object

43	canvas = document.getElementById(’panel’);

44	ctx = canvas.getContext(’2d’);

45

46	$(’#panel’).mousemove(function(e) { // mouse move handler

47	var canvasOffset = $(canvas).offset();

48	iMouseX = Math.floor(e.pageX – canvasOffset.left);

49	iMouseY = Math.floor(e.pageY – canvasOffset.top);

50

});

51

52	$(’#panel’).mousedown(function(e) { // binding mousedown event

53	bMouseDown = true;

54

});

55

56	$(’#panel’).mouseup(function(e) { // binding mouseup event

57	bMouseDown = false;

58

});

59

60	setInterval(drawScene, 30); // loop drawScene

61

});

What I doing: When we holding the mouse button and start moving it – variable bMouseDown become three. Then, in the main draw function we just going to check this variable and, in the case of the true, we’re just going to draw a new additional area with enlarged image (in a circle). After – pay attention to using of ‘globalCompositeOperation’. Using this method existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.

Downlod live package view live demo

stevetheblogger

12.06.16

Wonderful piece I have never understood how they do this Enjoyed it
Best Wishes
stevetheblogger

comments powered by Disqus