前端如何通过LUT实现图片滤镜

myzbx 2025-01-21 20:02 19 浏览

前言

说到图片滤镜，相信大家都不陌生，比如什么晨光效果、小清新效果。

但大家都清楚滤镜效果在前端是怎么实现的吗？比如下面两个好看的滤镜效果：

在前端，一般的图像处理库，都是基于算法来实现的，获取图片的像素，解析成R、G、B，然后对这3个颜色一通操作，比如R都变成255，G都减25…，或者复杂点，进行个卷积运算，比如fabric.js的滤镜效果。

但是这些算法实现的滤镜效果不仅数量少，效果也不够丰富，只能实现些简单的效果，比如反色、灰阶、怀旧等等。如果设计师在PS中对图片进行了风格调色，比如相机校正、曲线、色彩分割、HSL调整等等项目，在程序上我们又要如何实现呢？

本文要介绍的图片滤镜实现方式就可以解决上面的问题，只要是设计师实现的滤镜效果，我们都可以实现，而且，还有很多免费的滤镜效果可以使用，不一定需要设计师输出，滤镜效果好，并且处理速度快，这种方式就是3D LUT（look up table），即3D颜色查找表。

准备工作

1.3D LUT资源文件

设计师输出.CUBE文件，或者网上找免费资源。
图片的风格处理大都比较复杂，对设计师来说，Photoshop中内建了几个影片的3D LUT电影调色档，也可以用外部导入的电影调色档，所以我们也可以直接用设计师们用到的外部电影调色档，资源的格式一般是.CUBE文件。

2. 3D LUT资源文件格式处理

如果前端直接使用.CUBE文件，不仅文件体积大，而且需要做文件解析，但是如果把.CUBE文件转成png，不仅体积小很多，也不用解析文本，直接解析png图片中的像素即可，这里推荐一个cube转png小工具(http://yyb.gtimg.com/aiplat/static/qcloud-cube-to-png.html)，处理后的png一般是下面这样，宽高尺寸是512x512。

前端实现基于3D LUT的滤镜

下面我们写一个简单的页面，实现用户上传原图和lut图，就可以得到处理后的图，并且可以点击下载处理后的图。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>LUT</title>
        <style type="text/css">
        canvas {
            width: 300px;
        }
        </style>
    </head>

    <body>
        <a href="#" id="downloadButton">下载</a>
        <input type="file" id="fileInput" name="选择图片"/>
        <input type="file" id="lutInput"/>
        <div class="wrap-image">
            <canvas id="imageUpload"></canvas>
            <canvas id="lutUpload"></canvas>
            <canvas id="canvasOutput"></canvas>
        </div>
        <script type="text/javascript">
            var imgElement = document.getElementById('imageUpload');
            var lutElement = document.getElementById('lutUpload');
            var outputElement = document.getElementById('canvasOutput');

            var fileInput = document.getElementById('fileInput');
            var lutInput = document.getElementById('lutInput');

            fileInput.addEventListener('change', (e) => {
                var img = new Image
                img.src = URL.createObjectURL(e.target.files[0]);
                img.onload = function(){
                    imgElement.width = img.width
                    imgElement.height = img.height
                    outputElement.width = img.width
                    outputElement.height = img.height
                    var context = imgElement.getContext("2d");
                    context.drawImage(img, 0, 0);
                }
            }, false);
            lutInput.addEventListener('change', (e) => {
                var img = new Image
                img.src = URL.createObjectURL(e.target.files[0]);
                img.onload = function(){
                    lutElement.width = img.width
                    lutElement.height = img.height
                    var context = lutElement.getContext("2d");
                    context.drawImage(img, 0, 0);
                    applyLUT("canvasOutput");
                }
            }, false);
            function applyLUT(resultID) {
                var imageContext = imgElement.getContext("2d");
                var lutContext = lutElement.getContext("2d");
                var imageData = imageContext.getImageData(0, 0, imgElement.width, imgElement.height);
                var lutData = lutContext.getImageData(0, 0, lutElement.width, lutElement.height);
                for (var i = 0; i < imageData.data.length; i += 4) {
                    var r = Math.floor(imageData.data[i] / 4);
                    var g = Math.floor(imageData.data[i + 1] / 4);
                    var b = Math.floor(imageData.data[i + 2] / 4);
                    var lutX = (b % 8) * 64 + r;
                    var lutY = Math.floor(b / 8) * 64 + g;
                    var lutIndex = (lutY * lutElement.width + lutX) * 4;
                    imageData.data[i] = lutData.data[lutIndex];
                    imageData.data[i + 1] = lutData.data[lutIndex + 1];;
                    imageData.data[i + 2] = lutData.data[lutIndex + 2];;
                }
                document.getElementById(resultID).getContext("2d").putImageData(imageData, 0, 0);
            };
            document.getElementById('downloadButton').onclick = function() {
              this.href = document.getElementById('canvasOutput').toDataURL();
              this.download = 'image.png';
            };
        </script>
    </body>
</html>

效果如下，左边是原图，中间是3D LUT文件，右边是处理后的图，效果不错吧！

怎么样，效果是不是特别好？而且3D LUT不仅可以处理图片，还可以处理视频哦。

CSS HSL 颜色

上一篇：应用HTML5和CSS3实现举报中心PC端与手机端举报页面的自适应设计
下一篇：p5.js 中文入门教程

前端如何通过LUT实现图片滤镜

前言

准备工作

前端实现基于3D LUT的滤镜

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

用上Vue3，你真的变了吗?（vue3 key）

这么牛逼的cursor功能，赶紧用起来

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」