html5利用canvas实现图片转素描效果-H5教程-PHP中文网

首页

web前端

H5教程

html5利用canvas实现图片转素描效果

青灯夜游

Sep 25, 2018 pm 05:41 PM

canvashtml5

本章给大家介绍html5如何利用canvas实现图片转素描效果。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

素描滤镜原理：
最基础的算法就是：
1、去色；（去色公式：gray = 0.3 red + 0.59 green + 0.11 * blue）
2、复制去色图层，并且反色；
3、对反色图像进行高斯模糊；
4、模糊后的图像叠加模式选择颜色减淡效果。
减淡公式：C =MIN( A +（A×B）/（255-B）,255)，其中C为混合结果，A为去色后的像素点，B为高斯模糊后的像素点。

先看看效果对比图：

sigma可以调节效果。

代码实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="controls">
            <input type="file" name="" id="imgs" value=""/>
            <br />
            <!--<input type="range" name="" id="range_radius" value="10"  oninput="changeRadius()"/>
            radius：<span id="value_radius">1</span>
            <br />-->
            <input type="range" name="" id="range_sigma" value="40"  oninput="changeSigma()"/>
            sigma：<span id="value_sigma">0.8</span>
            <br />
            <a href="" download="canvas_love.png" id="save_href">下载</a>
        </div>
        <canvas id="canvas1" width="" height=""></canvas>
        <br>
        <canvas id="canvas2" width="" height=""></canvas>
        <script type="text/javascript">
            var eleImg = document.getElementById("imgs");
            var eleRadius = document.getElementById("range_radius");
            var eleSigma = document.getElementById("range_sigma");

            var valueRadius = document.getElementById("value_radius");
            var valueSigma = document.getElementById("value_sigma");

            var svaeHref = document.getElementById("save_href");

            var imgSrc = "img/2.jpg";
            var radius = 1;
            var sigma = 0.8;

            eleImg.addEventListener("input",function (e) {
                var fileObj = e.currentTarget.files[0]
                 if (window.FileReader) {    
                    var reader = new FileReader();    
                    reader.readAsDataURL(fileObj);    
                    //监听文件读取结束后事件    
                    reader.onloadend = function (e) {
                        imgSrc = e.target.result;    //e.target.result就是最后的路径地址
                        sketch()
                    };    
                } 
            });

            var butSave = document.getElementById("save");

            function changeRadius() {
                valueRadius.innerText = eleRadius.value/10;
                radius = eleRadius.value/10;
                sketch()
            }

            function changeSigma() {
                valueSigma.innerText = eleSigma.value/50;
                sigma = eleSigma.value/50;
                sketch()
            }

            var canvas1 = document.querySelector("#canvas1");
            var cxt1 = canvas1.getContext("2d");

            var canvas = document.querySelector("#canvas2");
            var cxt = canvas.getContext("2d");

            function sketch() {
                cxt1.clearRect(0,0,canvas1.width,canvas1.height); 
                cxt.clearRect(0,0,canvas.width,canvas.height); 
                var img = new Image();
                img.src = imgSrc;
                img.onload = function () {

                    canvas1.width = 600;
                    canvas1.height = (img.height/img.width)*600;
                    cxt1.drawImage(img, 0, 0, canvas1.width, canvas1.height);

                    canvas.width = 600;
                    canvas.height = (img.height/img.width)*600;
                    cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
                    var imageData = cxt.getImageData(0, 0, canvas.width, canvas.height);  //对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值
                    var imageData_length = imageData.data.length/4;
//                  var originData = JSON.parse(JSON.stringify(imageData))

                    // 解析之后进行算法运算
                    var originData = [];
                    for (var i = 0; i < imageData_length; i++) {
                        var red = imageData.data[i*4];
                        var green = imageData.data[i*4 + 1];
                        var blue = imageData.data[i*4 + 2];
                        var gray = 0.3 * red + 0.59 * green + 0.11 * blue;//去色
                        originData.push(gray)
                        originData.push(gray)
                        originData.push(gray)
                        originData.push(imageData.data[i * 4 + 3])
                        var anti_data = 255 - gray;//取反

                        imageData.data[i * 4] = anti_data;
                        imageData.data[i * 4 + 1] = anti_data;
                        imageData.data[i * 4 + 2] = anti_data;
                    }
                    imageData = gaussBlur(imageData, radius, sigma)//高斯模糊

                    for (var i = 0; i < imageData_length; i++) {
                        var dodge_data = Math.min((originData[i*4] + (originData[i*4]*imageData.data[i * 4])/(255-imageData.data[i * 4])), 255)//减淡

                        imageData.data[i * 4] = dodge_data;
                        imageData.data[i * 4 + 1] = dodge_data;
                        imageData.data[i * 4 + 2] = dodge_data;
                    }
                    console.log(imageData)
                    cxt.putImageData(imageData, 0, 0);
                    var tempSrc = canvas.toDataURL("image/png");
                    svaeHref.href=tempSrc;
                }
            }

            sketch()

            function gaussBlur(imgData, radius, sigma) {
                var pixes = imgData.data,
                    width = imgData.width,
                    height = imgData.height;

                radius = radius || 5;
                sigma = sigma || radius / 3;

                var gaussEdge = radius * 2 + 1;    // 高斯矩阵的边长

                var gaussMatrix = [],
                    gaussSum = 0,
                    a = 1 / (2 * sigma * sigma * Math.PI),
                    b = -a * Math.PI;

                for (var i=-radius; i<=radius; i++) {
                    for (var j=-radius; j<=radius; j++) {
                        var gxy = a * Math.exp((i * i + j * j) * b);
                        gaussMatrix.push(gxy);
                        gaussSum += gxy;    // 得到高斯矩阵的和，用来归一化
                    }
                }
                var gaussNum = (radius + 1) * (radius + 1);
                for (var i=0; i<gaussNum; i++) {
                    gaussMatrix[i] = gaussMatrix[i] / gaussSum;    // 除gaussSum是归一化
                }

                //console.log(gaussMatrix);

                // 循环计算整个图像每个像素高斯处理之后的值
                for (var x=0; x<width;x++) {
                    for (var y=0; y<height; y++) {
                        var r = 0,
                            g = 0,
                            b = 0;

                        //console.log(1);

                        // 计算每个点的高斯处理之后的值
                        for (var i=-radius; i<=radius; i++) {
                            // 处理边缘
                            var m = handleEdge(i, x, width);
                            for (var j=-radius; j<=radius; j++) {
                                // 处理边缘
                                var mm = handleEdge(j, y, height);

                                var currentPixId = (mm * width + m) * 4;

                                var jj = j + radius;
                                var ii = i + radius;
                                r += pixes[currentPixId] * gaussMatrix[jj * gaussEdge + ii];
                                g += pixes[currentPixId + 1] * gaussMatrix[jj * gaussEdge + ii];
                                b += pixes[currentPixId + 2] * gaussMatrix[jj * gaussEdge + ii];

                            }
                        }
                        var pixId = (y * width + x) * 4;

                        pixes[pixId] = ~~r;
                        pixes[pixId + 1] = ~~g;
                        pixes[pixId + 2] = ~~b;
                    }
                }
                imgData.data = pixes;
                return imgData;
            }

            function handleEdge(i, x, w) {
                var  m = x + i;
                if (m < 0) {
                    m = -m;
                } else if (m >= w) {
                    m = w + i - x;
                }
                return m;
            }
        </script>
    </body>
</html>

上面就是canvas实现图片转素描效果的全部代码，大家可以自己动手编译调试。

以上是html5利用canvas实现图片转素描效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee