用彩色文字重新创建图像
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
这篇文章最初发布在我的博客上。
嘿，朋友们！好久不见，我又回来啦，这次带来点好玩的东西。昨天我在推特上分享了一张我分析后用自己的名字重新创作的图片。它引起了不少关注，所以我想跟大家分享一下我是怎么做的！这涉及到HTMLcanvas元素，以及一些循环遍历数据来获取图片中颜色信息的操作。让我们开始吧！
温馨提示：每个步骤结束时都会有一个 CodeSandbox，您可以跟着步骤操作并随时检查您的工作。
目录
- 设置您的 HTML 和 JS
- 在画布上绘制你的图像
canvas - 获取
ImageData - 迭代获取像素颜色
- 添加一些容器
- 资源
1. 设置您的 HTML 和 JS
这一步比较枯燥。完成之后页面上不会显示任何内容。需要注意两点：
- 只有在代码沙箱环境中工作时才需要设置该
crossorigin属性。否则会出现安全错误。Anonymous - 图片加载完毕之前，我们无法对其进行任何操作。请确保所有后续代码都写在
onload事件监听器内！
2. 在……上画出你的图像canvas
现在图片已经加载并显示canvas在页面上，我们需要获取画布的 2D 渲染上下文。我们将调用drawImage()上下文并传入三个参数：
- 我们想要绘制的图像
- 要绘制的 x 坐标
- 要绘制的 y 坐标
这一步只需要添加两行代码。现在你的图片应该能显示了！:)
3. 获取ImageData
我们即将进入这个过程中最棘手的部分，但首先我们需要从上下文中获取一些数据。我们将其放在一个缓冲区中，以防出现任何错误。例如，如果您未设置图像属性，try...catch则可能会在此处看到安全错误。crossorigin
该getImageData()函数接受 4 个参数：
- 读取起始点的 x 坐标
- 读取起始的 y 坐标
- 要读取的区域宽度
- 要读取的区域高度
请注意，我们读取的是整个画布上的数据，因为图像很小，这是我们目前的设置方式。如果您愿意，可以在画布上绘制更大的图像，然后通过修改这四个参数，从较小的区域读取数据。
4. 迭代获取像素颜色
ImageData前面得到的对象有三个属性：` dataa`、width`b` 和 ` heightc`。我们只对第一个属性感兴趣。这里有点奇怪。`a`data属性是一个扁平数组。不确定这意味着什么？这里有一个简单的例子：
- 扁平数组：
["a", "b", "c", "d", ...] - 不是扁平数组：
["a", "b", ["c", "d"], ...]
对于从上下文中读取的每个像素数据，都会有 4 条与该像素颜色相关的数据被推送到这个数组中：颜色的宽度red、green高度blue和alpha饱和度值。因此，由于我们的图像是200px宽高比200px的，这个数组应该包含 160,000 条数据（因为 200 x 200 x 4 = 160,000）。
有了这些信息，我们就可以以 4 为增量循环遍历ImageData.data，并将每个颜色数据提取出来放入我们自己的数据结构中。下一步我们将使用这个新结构化的数据。您可以根据自己的需要重新格式化这部分代码。也许 JSON 对象更容易理解。不妨试试看！:)
5. 添加一些容器
现在我们可以使用颜色数据了！记住，我们把它们存储在一个二维数组中，所以我们需要进行一些嵌套循环。为了持续显示所需字符串的正确字母（我用的是我的名字！），我们需要跟踪页面上已经添加了多少个字母。我们使用取余%运算符来多次遍历字符串。
这里有很多 CSS 代码，让这段代码看起来有点乱。如果我们不想像我这样让它动态工作，可以font-size把它移到一个 CSS 文件中。但为了演示，我已经让它能够让你通过调整字体大小来“放大”或“缩小”图像。我们 CSS 中最重要的属性是color`!`。我们将把它设置为RGBA我们在上一步中得到的值。
渲染需要几秒钟时间。像素非常多（16万像素）！
6. 资源
就是这样！如果您对我们讨论过的一些主题还有疑问，这里有一些链接供您参考。所有链接都指向 MDN 文档。
如果你看到了这里，恭喜！！！🎉 希望这篇文章对你有所帮助，也希望它能让你觉得有趣。如果你用这篇文章创作了什么很棒的作品，请发推特告诉我，让我看看！
你知道我有电子报吗？📬
如果您想在我发布新博客文章或发布重大项目公告时收到通知，请访问https://ashleemboyer.com/newsletter。
文章来源：https://dev.to/ashleemboyer/re-create-an-image-with-colorful-text-2lmk