js实现图片的缩放、移动、旋转、拖拽

阅读：2147 添加日期：2021/3/27 23:16:05 原文链接：https://www.toutiao.com/item/6934115067600372235/

JS代码：

 <script type="text/javascript">
    function load() {
        init();
    }
        // 缩放图片
        function imgToSize(oBool) {
            var pic = document.getElementById("pic");
            pic.style.zoom = parseInt(pic.style.zoom) + (oBool ? 2 : -2) + '%';
            text.defaultValue=pic.style.zoom;
        }
        //还原尺寸
        function restore() {
            var pic = document.getElementById("pic");            
            pic.style.zoom = '100%';
            pic.style.left = "0px";
            pic.style.top = "0px";
            text.defaultValue=pic.style.zoom;
        }
        // 旋转图片
        var current = 0;
        function imgRoll(direction) {
            var pic = document.getElementById("pic");
            if (direction == "left") {
                current = (current - 90) % 360;
            }
            else if (direction == "right") {
                current = (current + 90) % 360;
            }
            pic.style.transform = 'rotate(' + current + 'deg)';
        }
        //图片拖拽
        drag = 0;
        move = 0;
        function mousedown() {
            if (drag) {
                X1 = window.event.x - parseInt(pic.style.left);
                Y1 = window.event.y - parseInt(pic.style.top);
                move = 1;
            }
        }
        function onmouseover() {
            drag = 1;
        }
        function mouseStop() {
            window.event.returnValue = false;
        }
        function mousemove() {
            if (move) {
                pic.style.left = (window.event.x - X1) + "px";
                pic.style.top = (window.event.y - Y1) + "px";
            }
        }
        function mouseup() {
            move = 0;
        }
        function init() {
            var pic = document.getElementById("pic");
            pic.style.zoom="100%";
            pic.style.left="0px";
            pic.style.top="0px";
            pic.style.position="relative";
            pic.style.cursor="move";
            document.all.pic.onmouseover = onmouseover;
            document.all.pic.onmousemove = mousemove;
            document.all.pic.onmousedown = mousedown;
            document.all.pic.onmouseup = mouseup;
            document.all.pic.ondragstart = mouseStop;
        }
    </script>

html代码：

<body onload="load()">
    <div style="text-align:center;">
        <img id="pic" src="landscape-4615578_960_720.webp.jpg" />
    </div>
<br/>
<div class="btn">
    <button class="btnleft" onclick="imgRoll('left');">左转</button>
    <button class="btnright" onclick="imgRoll('right');">右转</button>
    <button class="btnup" onclick="imgToSize(1);">放大</button>
    <button class="btndown" onclick="imgToSize(0);">缩小</button>
    <button class="btnreturn" onclick="restore();">还原</button>

</div>
</body>

效果图：