Post
Ask Question

Image Scaling by Slider Using HTML5

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>Image 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>  
</body>

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

Image after changing the value of the slider.

ImageScaling2


Similar Articles