How to rotate images using HTML5 canvas? (Example demonstration)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to rotate images using HTML5 canvas? (Example demonstration)

青灯夜游

Oct 20, 2020 pm 05:38 PM

canvas html5

How to rotate images using HTML5 canvas? (Example demonstration)

Recently, I suddenly wanted to study the function of rotating images in js. I won’t talk about the previous implementation methods first. HTML5 is very good now. Let’s mainly understand the image rotation in HTML5.

Example demonstration:

http://www.imqing.com/demo/rotateImg.html

Principle: Use canvas object to rotate.

Implementation method: First create a canvas element, and then draw the img element into the canvas. However, in fact, this is the default situation, when the image is not rotated. If the picture needs to be rotated 90 degrees, you need to rotate the canvas 90 degrees before drawing.

The description is as follows:

The internal rotation principle is like this. The coordinates of the picture are calculated from the upper left corner. To the right is the positive x direction, and down is the positive y direction. When rotating the canvas When, the coordinates are actually rotating, so the final drawing method is different.

At that time, I also used picpick to measure the coordinates of the starting point after rotating a certain angle, and then I realized that the original rotation was like this.

Code:

<body>  
    <button onclick="rotateImg(&#39;testImg&#39;, &#39;left&#39;)">向左旋转</button>  
    <button onclick="rotateImg(&#39;testImg&#39;, &#39;right&#39;)">向右旋转</button><br/>  
    <img src="./test.jpg" id="testImg"/>  
<script>  
    function rotateImg(pid, direction) {  
        //最小与最大旋转方向，图片旋转4次后回到原方向  
        var min_step = 0;  
        var max_step = 3;  
        var img = document.getElementById(pid);  
        if (img == null)return;  
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错  
        var height = img.height;  
        var width = img.width;  
        var step = img.getAttribute(&#39;step&#39;);  
        if (step == null) {  
            step = min_step;  
        }  
        if (direction == &#39;right&#39;) {  
            step++;  
            //旋转到原位置，即超过最大值  
            step > max_step && (step = min_step);  
        } else {  
            step--;  
            step < min_step && (step = max_step);  
        }  
        img.setAttribute(&#39;step&#39;, step);  
        var canvas = document.getElementById(&#39;pic_&#39; + pid);  
        if (canvas == null) {  
            img.style.display = &#39;none&#39;;  
            canvas = document.createElement(&#39;canvas&#39;);  
            canvas.setAttribute(&#39;id&#39;, &#39;pic_&#39; + pid);  
            img.parentNode.appendChild(canvas);  
        }  
        //旋转角度以弧度值为参数  
        var degree = step * 90 * Math.PI / 180;  
        var ctx = canvas.getContext(&#39;2d&#39;);  
        switch (step) {  
            case 0:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.drawImage(img, 0, 0);  
                break;  
            case 1:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(img, 0, -height);  
                break;  
            case 2:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.rotate(degree);  
                ctx.drawImage(img, -width, -height);  
                break;  
            case 3:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(img, -width, 0);  
                break;  
        }  
    }  
</script>  
</body>

Copy after login

Explanation: There is no need to explain canvas.width and height, it should be. You shouldn’t need to rotate, right? The key is drawImage(img, x, y);

x and y refer to the point from which to start drawing. Because the entire coordinate system is rotated, x and y are different. , for example step=1, the picture is rotated 90 degrees to the right, that is, the coordinate system is rotated 90 degrees, then the starting position should be x = 0, y= img.height

The above is the detailed content of How to rotate images using HTML5 canvas? (Example demonstration). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn