Question

我有一个形状为64x64x3的python数组。因此，宽度为64，高度为64，RGB像素值为3。如何在我的网站上渲染此像素阵列？例如，是否有一种方法可以让<img>标签在像素数组而不是文件名中读取？

使用JavaScript数组的解决方案也很好。

Answer 1

您需要先将阵列保存到图像文件，然后使用<img>标签将其链接。

下面是使用PIL库的示例：

from PIL import Image

imageFile = Image.new('RGB', (len(myArray[0]), len(myArray)))
imageFile.putdata([tuple(p) for row in myArray for p in row])
imageFile.save("example.png")

Answer 2

您可以使用<canvas>元素并以编程方式渲染像素。

The MDN has a great article on canvas，其中给出了以编程方式读取和写入像素的示例。

var canvas = document.getElementById('rasterCanvas');
var ctx = canvas.getContext('2d');

// get current raster data
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;

// prepare data
for(var i = 0; i < data.length; i++) {
  data[i] = Math.random() * 255; 
}

// draw newly modified pixels back onto the canvas
ctx.putImageData(imageData, 0, 0);

<canvas id="rasterCanvas" style="width: 100px; height: 100px; border: 1px solid red"></canvas>

Answer 3

有关基于Java脚本的完整答案，请参见下文。我选择HTML5 Canvas是因为它易于使用，您可以在画布上设置单个像素。

注意：数组只有5x5x3，因为我是手工制作的，但是这个概念应该很明显。

var ctx = document.getElementById('imageCanvas').getContext('2d');
var imageData = [
	[[255,0,0], [255,0,0], [255,0,0], [255,0,0], [255,0,0]],
  [[0,255,0], [0,255,0], [0,255,0], [0,255,0], [0,255,0]],
  [[255,0,0], [255,0,0], [255,0,0], [255,0,0], [255,0,0]],
  [[0,255,0], [0,255,0], [0,255,0], [0,255,0], [0,255,0]],
  [[255,0,0], [255,0,0], [255,0,0], [255,0,0], [255,0,0]],
];

for(var y = 0; y < imageData.length; y++){
	for(var x = 0; x < imageData[y].length; x++){
  	ctx.fillStyle = `rgb(${imageData[y][x][0]}, ${imageData[y][x][1]}, ${imageData[y][x][2]})`;
		ctx.fillRect( x, y, 1, 1 );
  }
}

<canvas id="imageCanvas" width="64" height="64" style="border:1px solid #000000;">
</canvas>

从像素阵列渲染网页上的图像

3 个答案: