使用原生 JavaScript 的超棒迷你图像编辑器
欢迎来到 JavaScript30 挑战的第三天，今天我们将使用纯 HTML、CSS 和 JavaScript 构建这个令人惊叹的迷你图像编辑器。
如果您想了解更多关于 JavaScript30 的信息，请观看下方视频并点击此处。
想知道我们项目最终效果如何？点击这里
起始文件
在继续之前，请从下面的代码片段中复制初始的 HTML 和 CSS 文件，并设置好本地环境以开始操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped CSS Variables and JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
<script src="script.js"></script>
</body>
</html>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background-color: var(--base);
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
/*
misc styles, nothing to do with CSS variables
*/
body {
text-align: center;
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
input {
width: 100px;
}
本地代码配置完成后，您的 HTML 文件将如下所示👇迷你编辑器截图
项目本身没问题，但是间距、模糊和颜色效果无法实现，因为我们需要用 JavaScript 来实现这些效果。但在学习 JavaScript 之前，我们先来了解一下 CSS 变量。
CSS变量
这个项目的主要目的是教我们CSS变量，
那么，让我们来学习一下什么是 CSS 变量，以及我们将如何在项目中使用它。我们将以上面代码中的示例为例——
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background-color: var(--base);
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
解释
- CSS变量可以具有全局作用域或局部作用域，全局变量可以在整个文档中使用，而局部变量只能在特定文档中使用。
- 要声明全局变量，必须使用 :root{} 选择器，然后可以使用 `--` 开头的任何有效 CSS 值来声明自定义属性。
- 现在，你可以借助 var() 函数将此变量与任何属性一起使用，例如，在上面的代码中，我们声明了一个 -spacing 变量，并使用 var(--spacing) 将其与 img 的 padding 属性一起重用。
JavaScript 逻辑
- 为了使我们的输入能够正常工作，我们首先将输入存储在一个变量中。
- 创建一个函数来处理输入更新。
- 添加事件监听器以调用此函数。
const inputs = document.querySelectorAll('.controls input')
function handleUpdate() {
const suffix = this.dataset.sizing || '' //blank value is for color as they don't hold px value
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
}
inputs.forEach(input => input.addEventListener('change', handleUpdate))
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate))
解释
- 我们编写了一个名为 handleUpdate() 的函数，以使输入功能正常运行。
- 后缀变量存储字符串“px”或空字符串，用于表示要添加到输入值后的颜色值。
- document.getElement 用于访问 HTML 文档的元素，我们使用它来更改元素的间距、模糊和颜色值，以便自动影响整个文档。
- 最后，我们为颜色添加了“change”事件监听器，为间距和模糊添加了“mousemove”事件监听器，使其能够动态工作。
结论
恭喜，你已经完成了这一步，你的编辑器现在应该可以正常工作了。
如果您对此项目有任何疑问或困惑，请在下方留言。
我们下篇文章再见，下次见！
祝您编程愉快！
文章来源：https://dev.to/ashutoshmishra/amazing-mini-image-editor-with-vanilla-javascript-day-3-of-javascript30-48fh