Heim > Artikel > Web-Frontend > Wie drehe ich Bilder mit HTML5-Canvas? (Beispieldemonstration)

Wie drehe ich Bilder mit HTML5-Canvas? (Beispieldemonstration)

青灯夜游nach vorne: 2020-10-20 17:38:114137Durchsuche

Vor kurzem wollte ich plötzlich die Funktion des Drehens von Bildern in js untersuchen. Ich werde nicht zuerst auf die vorherigen Implementierungsmethoden eingehen. HTML5 ist jetzt sehr gut. Lassen Sie uns hauptsächlich die Bilddrehung in HTML5 verstehen.

Beispieldemonstration:

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

Prinzip: Leinwandobjekt zum Drehen verwenden.

Implementierungsmethode: Erstellen Sie zuerst ein Canvas-Element und zeichnen Sie dann das img-Element in die Canvas. Tatsächlich ist dies jedoch die Standardsituation, wenn das Bild nicht gedreht wird. Wenn das Bild um 90 Grad gedreht werden muss, müssen Sie die Leinwand vor dem Zeichnen um 90 Grad drehen.

Die Beschreibung lautet wie folgt:

Die Koordinaten des Bildes werden von der oberen linken Ecke aus berechnet und von der positiven y-Richtung nach unten Auf der Leinwand befindet sich diese Koordinate tatsächlich in „Rotate“, sodass die endgültige Zeichnung anders ist.

Zu dieser Zeit habe ich auch Picpick verwendet, um die Koordinaten des Startpunkts nach der Drehung um einen bestimmten Winkel zu messen, und dann wurde mir klar, dass die ursprüngliche Drehung so war.

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>

Erklärung: Es besteht keine Notwendigkeit, die Breite und Höhe von Canvas.width und height zu erklären, das sollte so sein. Sie sollten nicht rotieren müssen, oder? Der Schlüssel ist drawImage(img, x, y);drawImage(img, x, y);

其中的x，y是指从哪一点开始画，因为整个坐标系统旋转了，所以，x，y不一样，比如step=1，图片向右旋转了90度，即坐标系旋转了90度，那么起始位置应该是x = 0, y= img.height

wobei sich x und y auf den Punkt beziehen, von dem aus mit dem Zeichnen begonnen werden soll. Da das gesamte Koordinatensystem gedreht wird, sind x und y unterschiedlich, z Als step=1 wird das Bild um 90 Grad nach rechts gedreht, das heißt, das Koordinatensystem wird um 90 Grad gedreht, dann sollte die Startposition x = 0, y= img sein. Höhe🎜

Das obige ist der detaillierte Inhalt vonWie drehe ich Bilder mit HTML5-Canvas? (Beispieldemonstration). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:51cto.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Detaillierte Einführung in Meta-TagsNächster Artikel：Detaillierte Einführung in Meta-Tags

In Verbindung stehende Artikel

Mehr sehen