js旋轉(zhuǎn)圖片的功能

發(fā)布時(shí)間：2020-07-04 18:39:05 來(lái)源：網(wǎng)絡(luò) 閱讀：578 作者：kent_tian 欄目：開發(fā)技術(shù)

最近突然想研究一下js旋轉(zhuǎn)圖片的功能。對(duì)于之前的實(shí)現(xiàn)方式，就不先說(shuō)了。現(xiàn)在HTML5很不錯(cuò)，主要了解一下HTML5中的圖片旋轉(zhuǎn)吧。

實(shí)例演示：

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

原理：利用canvas對(duì)象來(lái)旋轉(zhuǎn)。

實(shí)現(xiàn)方式：首先創(chuàng)建一個(gè)canvas元素，然后把img元素繪入canvas。但是，實(shí)際上，這是默認(rèn)情況，就是圖片沒(méi)旋轉(zhuǎn)時(shí)。如果圖片要旋轉(zhuǎn)90度的話，就需要先把canvas畫布旋轉(zhuǎn)90度后再繪圖。

描述如下： （內(nèi)部旋轉(zhuǎn)原理是這樣的，圖片的坐標(biāo)是從左上角開始計(jì)算，向右為x正方向，向下為y正方向，在旋轉(zhuǎn)畫布canvas時(shí)，實(shí)際上是這個(gè)坐標(biāo)在旋轉(zhuǎn)，所以最后繪圖方式不一樣。當(dāng)時(shí)我還用了picpick來(lái)測(cè)量旋轉(zhuǎn)一定角度后起點(diǎn)坐標(biāo)，才知道原來(lái)旋轉(zhuǎn)是這樣的，嘿嘿。）

代碼：

<body>  
    <button onclick="rotateImg('testImg', 'left')">向左旋轉(zhuǎn)</button>  
    <button onclick="rotateImg('testImg', 'right')">向右旋轉(zhuǎn)</button><br/>  
    <img src="./test.jpg" id="testImg"/>  
<script>  
    function rotateImg(pid, direction) {  
        //最小與最大旋轉(zhuǎn)方向，圖片旋轉(zhuǎn)4次后回到原方向  
        var min_step = 0;  
        var max_step = 3;  
        var img = document.getElementById(pid);  
        if (img == null)return;  
        //img的高度和寬度不能在img元素隱藏后獲取，否則會(huì)出錯(cuò)  
        var height = img.height;  
        var width = img.width;  
        var step = img.getAttribute('step');  
        if (step == null) {  
            step = min_step;  
        }  
        if (direction == 'right') {  
            step++;  
            //旋轉(zhuǎn)到原位置，即超過(guò)最大值  
            step > max_step && (step = min_step);  
        } else {  
            step--;  
            step < min_step && (step = max_step);  
        }  
        img.setAttribute('step', step);  
        var canvas = document.getElementById('pic_' + pid);  
        if (canvas == null) {  
            img.style.display = 'none';  
            canvas = document.createElement('canvas');  
            canvas.setAttribute('id', 'pic_' + pid);  
            img.parentNode.appendChild(canvas);  
        }  
        //旋轉(zhuǎn)角度以弧度值為參數(shù)  
        var degree = step * 90 * Math.PI / 180;  
        var ctx = canvas.getContext('2d');  
        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>

解釋： canvas.width與height就不用解釋了吧，應(yīng)該。rotate應(yīng)該也不用吧？關(guān)鍵是
drawImage(img, x, y);

其中的x，y是指從哪一點(diǎn)開始畫，因?yàn)檎麄€(gè)坐標(biāo)系統(tǒng)旋轉(zhuǎn)了，所以，x，y不一樣，比如step=1，圖片向右旋轉(zhuǎn)了90度，即坐標(biāo)系旋轉(zhuǎn)了90度，那么起始位置應(yīng)該是
x = 0, y= img.height

其它類似可得。是不是覺(jué)得很簡(jiǎn)單呢？

向AI問(wèn)一下細(xì)節(jié)

js旋轉(zhuǎn)圖片的功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽