使用 JavaScript 构建占位符图像生成器 📷 🔥
大家都喜欢“原生 JavaScript”，所以今天我们将借助HTML Canvas构建一个占位符图像生成器。
视频教程
和往常一样，如果您更喜欢视频格式的教程，欢迎在我的 YouTube 频道dcode上观看：
添加 HTML
我们先从用户界面和输入字段的 HTML 代码开始。
<h1>Placeholder Image Generator</h1>
<h3>Dimensions</h3>
<input type="number" class="input" id="inputWidth" value="400">
x
<input type="number" class="input" id="inputHeight" value="300">
<button id="buttonGenerate" type="button">Generate</button>
<h3>Data URL</h3>
<input type="text" class="input" id="inputDataUrl" placeholder="Please generate a placeholder image!" readonly>
<h3>Preview</h3>
<img alt="Preview Image" id="imagePreview" style="display: none">
这段代码包含了几个重要元素：
- 宽度和高度的两个输入框
- 用于生成占位符图像的按钮
- 用于存储生成的图像数据 URL 的输入字段
- 图片预览
接下来，我们来设置HTML样式。
我们可以添加一些非常基础的 CSS，让画面看起来更美观一些。
body {
font-family: sans-serif;
}
.input {
height: 30px;
box-sizing: border-box;
}
#inputWidth,
#inputHeight {
width: 100px;
}
#inputDataUrl {
width: 100%;
max-width: 600px;
}
#imagePreview {
width: 100%;
}
box-sizing请注意输入字段的设置。这样可以确保30px无论添加边框或内边距，它们的高度都保持不变。更多信息请参阅box-sizing 属性。
还要注意这些属性#inputDataUrl——通过这些属性，我们表示“让输入字段占据 100% 的宽度，但不要超过 600 像素”。这有助于提高移动设备的响应式设计。
编写 JavaScript
主要功能
现在我们开始学习 JavaScript，我们的第一个目标是编写一个函数，该函数将生成一个 canvas 元素，我们可以根据需要调整其大小，并添加背景和文本。
function createPlaceholderCanvas(width, height) {
const element = document.createElement("canvas");
const context = element.getContext("2d");
element.width = width;
element.height = height;
// Fill in the background
context.fillStyle = "#aaaaaa";
context.fillRect(0, 0, element.width, element.height);
// Place the text
context.font = "bold 90px sans-serif";
context.fillStyle = "#333333";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(`${width}x${height}`, element.width / 2, element.height / 2);
return element;
}
在这个函数的第一行，我们创建了一个全新的 HTML canvas 元素，我们可以对其进行操作。第二行获取了 2D 上下文，然后我们可以调用其方法来添加背景和文本。
接下来的两行代码很容易理解，我们正在设置画布所需的宽度和高度，这些值将由用户输入。
为了填充背景，我们将底色设置为深灰色fillStyle。这意味着下一个填充命令将使用该颜色。
说到这里，我们接下来要用它fillRect来绘制画布的背景，从左上角开始，覆盖画布的整个宽度和高度。
函数的最后一部分将文本添加到占位符图像中。我们设置了上下文中的字体、颜色和文本对齐方式。
现在我们已经定义了字体样式，接下来使用模板字符串fillText添加文本，生成类似这样的字符串：400x300。通过将宽度和高度除以 2，可以确保文本绘制在屏幕中央。
最后一行，我们只是返回新创建的 HTML canvas 元素。
使用户界面正常工作
现在我们已经编写好了核心逻辑，接下来就可以获取每个重要 HTML 元素的引用了：
const inputWidth = document.getElementById("inputWidth");
const inputHeight = document.getElementById("inputHeight");
const inputDataUrl = document.getElementById("inputDataUrl");
const imagePreview = document.getElementById("imagePreview");
接下来，我们可以对“生成”按钮的点击事件做出反应：
document.getElementById("buttonGenerate").addEventListener("click", () => {
const MIN_SIDE_LENGTH = 200;
// Validation
if (
isNaN(inputWidth.value)
|| isNaN(inputHeight.value)
|| inputWidth.value < MIN_SIDE_LENGTH
|| inputHeight.value < MIN_SIDE_LENGTH
) {
alert(`Please enter a valid image size. The minimum length is ${MIN_SIDE_LENGTH}px`);
return;
}
const canvasElement = createPlaceholderCanvas(inputWidth.value, inputHeight.value);
const dataUrl = canvasElement.toDataURL();
inputDataUrl.value = dataUrl;
imagePreview.src = dataUrl;
imagePreview.style.display = "block";
imagePreview.style.maxWidth = `${inputWidth.value}px`;
});
如您所见，我们在第一行定义了最小边长。如果用户输入的宽度或高度小于 200，我们将不会生成占位符图像。当然，您可以更改此设置 🙂
接下来，我们进行一些基本验证。我们检查用户是否确实提供了有效的宽度和高度值，以及这些值是否小于最小边长。
如果我们的验证失败，我们会通知用户并提前停止函数的执行return。
验证通过后，我们使用上面定义的函数创建 canvas 元素，并获取图像的数据 URL 。
代码的最后几行涉及向用户显示数据 URL 并使用 ` img<image>` 标签显示预览图像。我们还设置了最大宽度，以防止低分辨率图像被拉伸。
就这些啦！希望你喜欢这篇教程。如果你喜欢的话，欢迎关注我的YouTube频道dcode 😁
文章来源：https://dev.to/dcodeyt/build-a-placeholder-image-generator-with-javascript-477b