HTML5 Canvas: Cropping an image

This entry is part 16 of 17 in the series HTML5 Canvas

Using the drawImage method, we can have the image cropped.

The cropping properties are the start X and Y positions in the image and the width and height of the cropping frame.

Syntax:

ontext.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Cropping an image</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='canvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    var canvasImage = new Image();
    function cropImage() {
        canvas.drawImage(canvasImage,
                0, // position X inside the crop
                0, // position Y inside the crop
                457, // source image width
                343, // source image height
                110, //crop position X
                110, //crop position Y
                250, //crop width
                250 //crop height
        );
    }
    canvasImage.addEventListener('load', cropImage, false);
    canvasImage.src = 'https://codecrawl.com/code/images/ushuaia.jpg';
</script>
</body>
</html>

The original jpg image without cropping is located in this link.

 

CSS3: Animated image zoom on mouse hover

This entry is part 6 of 13 in the series CSS3

We take a thumbnail photo and animate it to show its full size.

The CSS code here uses a combination of rotate and scale to achieve the animation effects.

This is done without the use of Javascript.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Transform</title>
    <style>
        body {
            padding: 100px;
            text-align: center;
        }

        img {
            background: #fff;
            border: 1px solid #BFBFBF;
            display: block;
            float: left;
            height: 125px;
            margin: 0 10px 0 0;
            padding: 5px;
            width: 125px;
            position: relative;
            -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
        }

        img:hover {
            -webkit-transform: rotate(10deg) scale(2);
            -moz-transform: rotate(10deg) scale(2);
            -o-transform: rotate(10deg) scale(2);
            -ms-transform: rotate(10deg) scale(2);
            transform: rotate(10deg) scale(2);
        }
    </style>
</head>
<body>

<img src='https://codecrawl.com/code/images/ushuaia1.jpg' alt='Ushuaia'/>

</body>
</html>

The line

position: relative

means that the image position is relative to its parent tag which is the <body> tag.

With the transition statements in line 21,22,23, the animation will be done in a second.  Without these transition effects, it will move to its final position immediately.

HTML5: Marking images with <figure> and <figcaption>

This entry is part 13 of 34 in the series HTML5

The <figure> element allow us to wrap an image and give it a description.

Now with <figure>, we can associate an image with a caption, using <figcaption>.
 
Codecrawl.com – HTML 5

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
</head>
<body>
<figure>
    <img src='//codecrawl.com/code/images/ushuaia.jpg' width='300px'>
    <figcaption>Ushuaia, the southernmost city in the world</figcaption>
</figure>
</body>
</html>

HTML Table: Inserting an image to a row spanning column

This entry is part 10 of 16 in the series HTML Table

In the old days, we have always used table to layout a page.

We can create a row spanning column and insert an image there.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='80%'>
    <tr>
        <th>ID</th>
        <th>Artiste</th>
        <th>Album</th>
        <th rowspan="3"><img src='https://codecrawl.com/code/images/oasis.jpg' width='60' height='60'></th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>


Image In A Table

HTML: Creating graphical hyperlink

This entry is part 34 of 34 in the series HTML

To create a hyperlink on an image, we place the <img> tag in an <a> tag.

You can refer to an earlier example where we have created a hyperlink to a webpage.

Codecrawl.com-Image

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Image</title>
</head>
<body>

<a href='http://en.wikipedia.org/wiki/Ushuaia' title='Ushuaia'><img src='//codecrawl.com/code/images/ushuaia1.jpg'></a>

</body>
</html>

Just in case that the image is not loaded for some reason, we could put an alternate text on the image.

<img src='//codecrawl.com/code/images/ushuaia1.jpg' alt='Ushuaia'>