分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了HTML5 图像缩放，旋转，亮度调节，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

本文利用<img> 的属性和CSS，实现图像的缩放，旋转和亮度调节功能。

<!DOCTYPE html>
<html>
    <head>
        <Meta charset="UTF-8">
    </head>

    <body>
        <div id='jtDiv' style="text-align:center;">
            缩小<input id='scaleSlider' type='range' @H_144_25@min='0.2' @H_144_25@max='2.0' step='0.2' value='1.0'/>放大
            <button onclick="rotateImg('right')">顺时针</button>
            <button onclick="getSrcImg()">原图</button>
            <button onclick="rotateImg('left')">逆时针</button> 
            变暗<input id='factorSlider' type='range' @H_144_25@min='0.1' @H_144_25@max='1.0' step='0.1' value='0.5'/>变亮 </br>
            <img id="Img" step="0" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496296350540&di=44decc68b3be590c826a88702be138cc&imgtype=0&src=http%3A%2F%2Ff2.topit.me%2F2%2F2b%2F41%2F11620513502d5412b2l.jpg" style="display: block; transform: rotate(0deg); margin: 100px auto;filter: brightness(0.5);" />
        </div>
    </body>

    <script type="text/javascript"> // Get the image from id var img = document.getElementById('Img'); var width = img.width; var height = img.height; var step = parseInt(img.getAttribute('step')); // Zoom in or out var scaleSlider = document.getElementById('scaleSlider'),scale = 1.0,MINIMUM_SCALE = 0.2,MAXIMUM_SCALE = 2.0; scaleSlider.onchange = function(E) { scale = e.target.value; if (scale < MINIMUM_SCALE) { scale = MINIMUM_SCALE; } else if (scale > MAXIMUM_SCALE) { scale = MAXIMUM_SCALE; } zoomImg(scalE); }; // Brightness  var factorSlider = document.getElementById('factorSlider'),factor = 0.5,MINIMUM_FACTOR = 0.1,MAXIMUM_FACTOR = 1.0; factorSlider.onchange = function(E) { factor = e.target.value; if (factor < MINIMUM_FACTOR) { factor = MINIMUM_FACTOR; } else if (factor > MAXIMUM_FACTOR) { factor = MAXIMUM_FACTOR; } brightenImg(factor); } function getSrcImg() { img.width = width; img.height = height; img.style.transform = "rotate(0deg)"; img.style.filter = "brightness(0.5)"; } function zoomImg(scalE) { var cWidth = img.width,cHeight = img.height,sw = cWidth * scale,sh = cHeight * scale; img.width = sw; img.height = sh; } function rotateImg(direction) { //最小与最大旋转方向，图片旋转4次后回到原方向 var min_step = 0; var max_step = 3; if (step === null) { step = min_step; } if (direction == 'right') { step++; //旋转到原位置，即超过最大值 if (step > max_step) { step = min_step; } } else { step--; if (step < min_step) { step = max_step; } } img.setAttribute('step',step); //旋转角度以弧度值为参数 var degree = step * 90; img.style.transform = "rotate(" + degree + "deg"; } function brightenImg(factor){ img.style.filter = "brightness(" + factor + ")"; } </script>

</html>