ARTICLE

Image Scaling by Slider Using HTML5

Posted by Aditya Gaur Articles | HTML 5 June 04, 2012
In this article we do Image Scaling using HTML5.
Reader Level:

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>
&nbsp;
<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:

// Event handlers
 
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();
};

// Initialization

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

COMMENT USING

Trending up