前言

近期利用业余时间，我用JavaScript实现了一下HTML5网页端的图像处理基本操作，其实，主要是用jimp 这个JavaScript库。@H_675_8@

代码

本文，主要实现了图像的放大、缩小、旋转和亮度调节功能。具体实现代码，如下所示。@H_675_8@

<!DOCTYPE html>
<html>
    <head>
    <Meta charset="UTF-8">
        <title>Jimp browser example 1</title>
    </head>
    <body>
        <div style="text-align:center;">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Bot-Test.jpg" id="myImage" /> <br />
            <button onclick="getSrcImg()">原图</button>
            <button onclick="zoomInImg()">放大</button>
            <button onclick="zoomoutIR_366_11845@g()">缩小</button>
            <button onclick="rotateImgClockwise()">顺时针旋转</button>
            <button onclick="rotateImgAntiClock()">逆时针旋转</button>
            亮度调节因子:
            <input id="Bfactor" type="number" name="bdv" @H_80_29@mix="-1" @H_80_29@max="1" value=0.2 />
            <button onclick="brightenImg()">亮度调节</button>
        </div>

        <script src="./lib/jimp.min.js" type="text/javascript"></script>
        <script type="text/javascript"> var myImage = document.getElementById("myImage"); function getSrcImg() { var mySrc = "https://upload.wikimedia.org/wikipedia/commons/0/01/Bot-Test.jpg"; myImage.setAttribute("src",mySrc); } function zoomInImg() { var scale = 1.2; var width = myImage.width * scale; var height = myImage.height * scale; Jimp.read(myImage.src,function (err,imagE) { image.resize(width,height,Jimp.RESIZE_BILINEAR) .getBase64(Jimp.MIME_JPEG,srC) { myImage.setAttribute("src",src); }); }).catch(function (err) { console.error(err); }); } function zoomoutIR_366_11845@g() { var scale = 0.8; var width = myImage.width * scale; var height = myImage.height * scale; Jimp.read(myImage.src,Jimp.RESIZE_NEAREST_NEIGHBOR) .getBase64(Jimp.MIME_JPEG,src); }); }).catch(function (err) { console.error(err); }); } function rotateImgClockwise() { var degree = 90; Jimp.read(myImage.src,imagE) { image.rotate(degree,false) .getBase64(Jimp.MIME_JPEG,src); }); }).catch(function (err) { console.error(err); }); } function rotateImgAntiClock() { var degree = -90; Jimp.read(myImage.src,src); }); }).catch(function (err) { console.error(err); }); } function brightenImg() { var bfactor = document.getElementById("Bfactor"); var factor = parseFloat(bfactor.value); if (isNaN(factor)) { alert("亮度调节因子输入值为空!"); } else { if (factor < -1 || factor > 1) { alert("亮度调节因子输入值范围为-1到1的小数!"); } else { Jimp.read(myImage.src,imagE) { image.brightness(factor) // -1 ~ +1 .getBase64(Jimp.MIME_JPEG,src); }); }).catch(function (err) { console.error(err); }); } } } </script>

    </body>
</html>