JavaScript实现图片旋转及缩放(通过canvas)

原创已于 2023-12-01 10:17:17 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2023-11-29 16:21:48 首次发布

本文介绍了如何使用HTML5的canvasAPI在网页上实现图片的动态旋转和缩放功能，通过JavaScript控制按钮操作，改变canvas的尺寸和变换矩阵以适应图片的变化。

通过画布canvas实现图片缩放及旋转。

示例：示例

初始图片: 在这里插入图片描述
放大旋转后的图片

关键代码如下：


<div style="text-align: center;font-weight: bold;height: 20px;font-size: large;">
    <button onclick="rotateImage()">旋转</button>
    <button onclick="big()">放大</button>
    <button onclick="small()">缩小</button>
</div>

<script type="text/javascript">
    var scale = 1;
    var rotation = 0; // 初始旋转角度为0
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    function drawImage(width,height) {
        //设置 Canvas 大小为旋转缩放后的图片尺寸
        canvas.width = width;
        canvas.height = height;
        // 清空 Canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 设置变换并绘制图片
        ctx.translate(width / 2, height / 2);
        ctx.rotate(rotation);
        ctx.scale(scale, scale);
        ctx.drawImage(image, -image.width / 2, -image.height / 2,image.width,image.height);
        // 恢复 Canvas 变换状态
        ctx.setTransform(1, 0, 0, 1, 0, 0);
    }

    function rotateImage() {
        rotation += Math.PI / 2; // 每次点击旋转90度
        // 计算旋转后的图片尺寸
        //旋转之后长宽变化
        var rotatedWidth = scaledHeight;
        var rotatedHeight = scaledWidth;
        //更新旋转之后的全局长宽
        scaledHeight = rotatedHeight;
        scaledWidth = rotatedWidth;

        drawImage(rotatedWidth,rotatedHeight);
    }

    function big() {
        scale *= 1.1;
        scaledWidth = scaledWidth * 1.1;
        scaledHeight = scaledHeight * 1.1;
        drawImage(scaledWidth,scaledHeight);
    }

    function small() {
        scale /= 1.1;
        scaledWidth = scaledWidth / 1.1;
        scaledHeight = scaledHeight / 1.1;
        canvas.width = scaledWidth;
        canvas.height = scaledHeight;
        drawImage(scaledWidth,scaledHeight);
    }
</script>