HTML5 利用JavaScript 实现图像基本操作

来源：互联网发布：虫虫软件编辑：程序博客网时间：2024/05/23 00:10

前言

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

代码

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

<!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="zoomOutImg()">缩小</button>            <button onclick="rotateImgClockwise()">顺时针旋转</button>            <button onclick="rotateImgAntiClock()">逆时针旋转</button>            亮度调节因子:            <input id="Bfactor" type="number" name="bdv" mix="-1" 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, function (err, src) {                              myImage.setAttribute("src", src);                         });                }).catch(function (err) {                    console.error(err);                });            }            function zoomOutImg()            {                var scale = 0.8;                var width = myImage.width * scale;                var height = myImage.height * scale;                Jimp.read(myImage.src, function (err, image) {                    image.resize(width, height, Jimp.RESIZE_NEAREST_NEIGHBOR)                         .getBase64(Jimp.MIME_JPEG, function (err, src) {                              myImage.setAttribute("src", src);                         });                }).catch(function (err) {                    console.error(err);                });            }            function rotateImgClockwise()            {                var degree = 90;                Jimp.read(myImage.src, function (err, image) {                    image.rotate(degree, false)                         .getBase64(Jimp.MIME_JPEG, function (err, src) {                              myImage.setAttribute("src", src);                         });                }).catch(function (err) {                    console.error(err);                });            }            function rotateImgAntiClock()            {                var degree = -90;                Jimp.read(myImage.src, function (err, image) {                    image.rotate(degree, false)                         .getBase64(Jimp.MIME_JPEG, function (err, src) {                              myImage.setAttribute("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, function (err, image) {                        image.brightness(factor) // -1 ~ +1                             .getBase64(Jimp.MIME_JPEG, function (err, src) {                                  myImage.setAttribute("src", src);                             });                        }).catch(function (err) {                            console.error(err);                        });                    }                }            }        </script>    </body></html>