当使用 HTML5 的 Canvas API 处理图像时，可以使用 getImageData() 方法获取一张图像的像素数据。这个方法返回一个 ImageData 对象，包含了图像每个像素的颜色信息。
但是有时候我们可能需要将这些像素数据转换成一张实际的图片，在前端开发中这种需求还是比较常见的。那么该怎么做呢？本文将介绍如何在 JavaScript 中从 imageData 生成图片。
方法一：使用 Canvas API 生成图片
最简单的方法就是使用 Canvas API 中的 putImageData() 方法来生成一张图片。该方法接受两个参数，第一个是要绘制的 ImageData 对象，第二个是绘制的左上角坐标。
-- -------------------- ---- ------- ----- ------ - --------------------------------- ----- ------- - ------------------------ -- -- --------- -- ----- --------- - ----------------------- -- ---- ----- -- --- ------ - ------------------------------- -- --- -- - ------ ---- ----- --- - --- -------- ------- - -------------------
在这个例子中，我们首先创建了一个空的 canvas 和它的上下文对象。然后使用 getImageData() 方法获取了一个大小为 100x100 的 ImageData 对象，并使用 putImageData() 方法将其绘制到了 canvas 上。
最后，我们将 canvas 转换成图片并将其赋值给一个 img 元素。这个 img 元素包含了生成的图片，可以将其插入到 HTML 中显示。
方法二：使用 Blob 对象生成图片
另一种方法是使用 Canvas.toBlob() 方法将 canvas 转换成一个 Blob 对象，然后使用 URL.createObjectURL() 生成一个链接并插入到 HTML 中。
-- -------------------- ---- ------- ----- ------ - --------------------------------- ----- ------- - ------------------------ -- -- --------- -- ----- --------- - ----------------------- -- ---- ----- -- --- ------ - ------------------------------- -- --- -- - ------ -- ---- -- ---------------------------- - ----- --- - -------------------------- -- ---- --- -- ----- --- - --- -------- ------- - ---- -- --- ---- - ------------------------------- ---
这个例子中，我们首先创建了一个空的 canvas 和它的上下文对象。然后使用 getImageData() 方法获取了一个大小为 100x100 的 ImageData 对象，并使用 putImageData() 方法将其绘制到了 canvas 上。
接下来，我们调用 toBlob() 方法将 canvas 转换成一个 Blob 对象，并使用 createObjectURL() 方法生成一个链接。最后，我们创建了一个 img 元素，并将其插入到 HTML 中。
总结
通过以上两种方法，我们可以很容易地从 imageData 对象生成一张图片。值得注意的是，第一种方法可以在大多数情况下使用，但是如果像素数据过大，可能会导致浏览器崩溃。而第二种方法则可以避免这个问题。
无论选择哪种方法，都可以通过这种方式将图像处理和生成的功能应用到实际的前端开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31162