在 javascript 中创建图像数据

Question

我想在 javascript 中创建一个黑色（或白色，我真的不关心“颜色”）1x1px 图像，我尝试用 var img = new Image(1,1) 来做，但我没有知道如何将img.src的图片来源设置为全黑（我不想用文件，我想用JS代码生成）。

有办法吗？

Answer 1

我找到了：

var image = document.createElement('canvas').getContext('2d').getImageData(0,0,1,1);

我会提出问题以了解是否有其他方法。

我使用的来源：

Answer 2

同样，您可以在 canvas 中执行图像处理，然后将包含图像表示的数据 URI 传递给 HTML 图像以进行实际渲染。

const imgWidth = 1;

const canvas = document.createElement("canvas");
canvas.width = imgWidth;
canvas.height = imgWidth;

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0,0,imgWidth,imgWidth);

const url = canvas.toDataURL();
const newImg = document.createElement("img");
newImg.src = url;
document.body.insertBefore(newImg, null);

Answer 3

您还可以在 image.src 中使用 base64 encoded 数据。

var image = new Image(10, 10);
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
document.body.appendChild(image);

在 javascript 中创建图像数据

create image data in javascript

javascript

image