使用CSS过滤器和jQuery构建简单的图像编辑器

CSS过滤器是仅使用CSS即可处理图像的强大工具。 一旦在所有浏览器中实现，您就可以将效果应用于图像，而无需外部软件。

CSS过滤器本身就是一个巨大的话题，在这里我将不讨论所有可用的过滤器。 我要谈论的是如何使用多个滤镜产生复杂的效果-并创建自己的图像编辑器。

如果您想更深入地研究，请随时查看MDN上的“过滤器”或HTML5 Rocks上的“ 了解CSS过滤器效果” ，这两种方法都更详细地介绍了过滤器的一般主题。

CSS过滤器语法

要在CSS中编写滤镜效果，只需使用filter:和filter:名称（如grayscale ， blur等）。

.example {
  filter: <filter-function> [<filter-function>];
}

这是将90％ grayscale滤镜应用于元素的方法：

.example {
  filter: grayscale(90%);
}

对于Webkit浏览器，您需要一个前缀：

.example {
  -webkit-filter: grayscale(90%);
}

过滤器属性的值通常介于0到1之间，但也有一些例外。 例如， blur属性使用像素单位，并且可以是任何整数。 另外， hue-rotate滤波器值是一个以“度”为单位的整数。

.example {
  filter: blur(10px);
}

.example-2 {
  filter: hue-rotate(90deg);
}

组合多个过滤器

您可以组合任意数量的功能来操纵渲染。 但是，如果要应用多个滤镜效果，可以通过在单个声明中用空格隔开来实现。 这是组合grayscale和blur ：

.example {
  filter: grayscale(0.5) blur(10px);
}

构建图像编辑器

我们的图像编辑器将分为两个部分：

1. URL字段和图像容器，以允许通过外部URL加载图像。
2. 控件，将是用于在加载的图像上应用不同效果的滑块。

URL字段和图像容器

我们将使用两个表单元素来请求图像URL：一个文本输入和一个按钮。 然后，我们将在imageContainer div中的URL处加载图像。

这是HTML：

<!-- Form for collecting image URL -->
<form id="urlBox" class="center">
    <input class="url-box" type="url" id="imgUrl">
    <input id="go" type="button" value="Go">
</form>

<!-- container where image will be loaded-->
<div id="imageContainer" class="center">
    <img src="/default.png" alt="">
</div>

这是jQuery：

// adding an image via url box
function addImage(e) {
    var imgUrl = $('#imgUrl').val();
    if (imgUrl.length) {
        $('#imageContainer img').attr('src', imgUrl);
    }
    e.preventDefault(); 
}

// on click of go(submit) button, addImage() will be called
$('#go').click(addImage);

// on pressing return(enter), addImage() will be called
$('#urlBox').submit(addImage);

控制项

这是我们应用程序的核心，这是我们将实际处理原始图像以将其转换为其他内容的地方。

为了获取不同过滤器的值，我们将使用范围选择器。 这将使我们立即看到更改的效果。 这是添加两个范围选择器的代码-一个用于grayscale ，另一个用于blur （为简单起见，这里只有两个示例，但是原始代码有9个选项）：

这是HTML：

<!--Controls for CSS filters via range input-->
<form id="imageEditor">
    <p>
        <label for="gs">Grayscale</label>
        <input id="gs" name="gs" type="range" min="0" max="100" value="0">
    </p>

    <p>
        <label for="blur">Blur</label>
        <input id="blur" name="blur" type="range" min="0" max="10" value="0">
    </p> 
</form>

要在滑块值更改时将更改的效果应用到CSS过滤器，请使用jQuery：

// Editing image via css properties
function editImage() {
    var gs = $('#gs').val(); // grayscale
    var blur = $('#blur').val(); // blur

  $('#imageContainer img').css('-webkit-filter', 
                               'grayscale(' + gs + '%) blur(' + blur + 'px');
}

// When sliders change, image will be
// updated via the editImage() function     
$('input[type=range]').change(editImage).mousemove(editImage);

每当调整滑块时， editImage()调用editImage()函数。 editImage()首先将滑块的值存储在各个变量（ gs和blur ）中，然后将其应用于图像。

这里要记住的重要一点是您要应用的特定filter的单位。 正如您在上面的代码中看到的那样，它是“％”表示grayscale()过滤器，“ px”是blur()过滤器。

现在，您可以在上述代码的基础上添加所有过滤器，并拥有自己的微型图像编辑器。

演示和完整代码

您可以在此处查看最终的图像编辑器，其中所有9个滤镜都在起作用 。 或在GitHub上下载演示的完整代码。

既然您已经知道CSS提供了处理图像的全部功能，那么您一定要在下一个项目中尝试一下filter属性。 如果您有兴趣，可以继续尝试向当前应用程序添加以下功能，并使其更有用：

• 选择从桌面上传图像。
• 选择下载修改的图像。

随意分叉并发送拉取请求 。 乐于合作！

From: https://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery/