Introduction
In this article we learn how to create Image Scaling using a slider in HTML5. We use the drawImage method of HTML5 and a Slider to provide scaling functionality to an image.
drawImage Method
The drawImage method is for using an image on a canvas and can also draw parts of an image, reduce or increase its size. It takes up to nine parameters depending on what you want to do with the image. The image object can be an image, a video or another canvas element.
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Step 1 - First we define the body of the HTML using a canvas element and declare the name of JavaScript, like this:
- <body>
- <div><h1>Scaling Using HTML5</h1></div>
- <div id='controls'>
- <output id='scaleOutput'>1.0 </output>
- <input id='slider_value' type='range'
- min='1' max='5.0' step='0.01' value='1.0'/> <!-- value is default slider value. Min and Max are slider range-->
- </div>
- <canvas id='mycanvas' width='1500' height='750'>
- Sorry,Canvas is not supported in this Browser..
- </canvas>
- <script src='ImageScaling_script.js'></script>
Step 2 - Then we define the functions in JavaScript and use the parseFloat() function to parse a string and return the floating point number and toFixed() method to convert a number into a string, keeping a specified number of decimals. MIN_SCALE and Max_Scale are use to set the slider min and max values.
- var canvas = document.getElementById('mycanvas'),
- context = canvas.getContext('2d'),
- image = new Image(),
- slider_value = document.getElementById('slider_value'),
- defaultval = 1.0,
- MIN_SCALE = 1.0,
- MAX_SCALE = 5.0;
- function drawScaleText(value) {
- var text = parseFloat(value).toFixed(2);
- var percent = parseFloat(value - MIN_SCALE) /parseFloat(MAX_SCALE - MIN_SCALE);
- scaleOutput.innerText = text;
- percent = percent < 0.35 ? 0.35 : percent;
- scaleOutput.style.fontSize = percent * MAX_SCALE / 1.5 + 'em';
- }
- function CreateImage() {
- var w = canvas.width,
- h = canvas.height,
- sw = w * defaultval,
- sh = h * defaultval;
- context.clearRect(0, 0, canvas.width, canvas.height);
- context.drawImage(image, -sw / 2 + w / 2, -sh / 2 + h / 2, sw, sh);
- }
Step 3 -
Now we define the Event Handler and Initialization in JavaScript, like this:
-
- slider_value.onchange = function(e) {
- defaultval = e.target.value;
- if (defaultval < MIN_SCALE) scale = MIN_SCALE;
- else if (defaultval > MAX_SCALE) scale = MAX_SCALE;
- drawScaleText(defaultval);
- CreateImage();
- };
-
-
- context.fillStyle = 'cornflowerblue';
- context.strokeStyle = 'Black';
- context.shadowColor = 'Yellow';
- context.shadowOffsetX = 5;
- context.shadowOffsetY = 5;
- context.shadowBlur = 20;
- image.src = 'country.jpg';
- image.onload = function(e) {
- CreateImage();
- drawScaleText(slider_value.value);
- };
Step 4 - We use CSS in the Head section for describing the the look and formatting to our HTML page, like this:
- <head>
- <title>Image Scaling using slider in HTML5</title>
- <style>
- body {
- background: rgba(200, 305, 500, 0.3);
- }
- #controls {
- margin-left: 15px;
- padding: 0;
- }
- #slider_value {
- vertical-align: 10px;
- width: 200px;
- margin-left: 90px;
- }
- #scaleOutput {
- position: absolute;
- width: 60px;
- height: 30px;
- margin-left: 10px;
- vertical-align: center;
- text-align: center;
- color: Black;
- font: 20px Verdana;
- }
- #mycanvas {
- margin: 10px 20px 0px 20px;
- border: thin solid Black;
- cursor: crosshair;
- }
- </style>
- </head>
Output
![ImageScaling1.jpg]()
Image after changing the value of the slider:
![ImageScaling2.jpg]()