Comment faire pivoter des images à l'aide d'un canevas HTML5 ? (Exemple de démonstration)-tutoriel HTML-php.cn

Comment faire pivoter des images à l'aide d'un canevas HTML5 ? (Exemple de démonstration)

青灯夜游

Libérer： 2020-10-20 17:38:11

avant

4191 Les gens l'ont consulté

Comment faire pivoter des images à l'aide d'un canevas HTML5 ? (Exemple de démonstration)

Récemment, j'ai soudain eu envie d'étudier la fonction de rotation des images en js. Je ne parlerai pas d'abord des méthodes de mise en œuvre précédentes. HTML5 est très bon maintenant. Comprenons principalement la rotation des images en HTML5.

Exemple de démonstration :

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

Principe : utilisez un objet canevas pour faire pivoter.

Méthode d'implémentation : créez d'abord un élément de canevas, puis dessinez l'élément img dans le canevas. Cependant, en fait, il s'agit de la situation par défaut, lorsque l'image n'est pas pivotée. Si l'image doit être tournée de 90 degrés, vous devez faire pivoter la toile de 90 degrés avant de dessiner.

est décrit comme suit :

Le principe de rotation interne est le suivant. Les coordonnées de l'image sont calculées à partir du coin supérieur gauche. Vers la droite se trouve la direction x positive, et vers le bas se trouve la direction x positive. la direction y positive. Lors de la rotation de la toile Quand, les coordonnées tournent réellement, donc la méthode de dessin finale est différente.

A cette époque, j'utilisais également picpick pour mesurer les coordonnées du point de départ après avoir tourné d'un certain angle, puis j'ai réalisé que la rotation d'origine était comme ça.

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>

Copier après la connexion

Explication : Il n'est pas nécessaire d'expliquer la largeur et la hauteur de la toile, cela devrait l'être. Vous ne devriez pas avoir besoin de faire une rotation, n’est-ce pas ? La clé est drawImage(img, x, y);

où x et y font référence au point à partir duquel commencer à dessiner. Étant donné que l'ensemble du système de coordonnées est pivoté, x et y sont différents. Par exemple, step=1, l'image est. tourné de 90 degrés vers la droite, c'est-à-dire que le système de coordonnées est tourné de 90 degrés, alors la position de départ doit être x = 0, y= img.height

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!