JavaScript 数组转 PNG？ - 客户端

Question

有什么方法可以将二维十六进制代码数组转换为 png 图像吗？

数组看起来像这样（只是大得多）

[
  [
    '#FF0000',
    '#00FF00'
  ],
  [
    '#0000FF',
    '#000000'
  ]
]

根据这个数组，图像应该是这样的

如果该方法不适用于这样的数组，它将适用于什么类型的数组？

Answer 1

PNGlib 看起来很有帮助。您必须创建一个类似于他们的示例的循环：

var p = new PNGlib(200, 200, 256);

for (var x = 0; x < 2; x++)
    for (var y = 0; y < 2; y++)
        p.buffer[p.index(x, y)] = p.color(/* your colour */);

document.write('<img src="data:image/png;base64,' + p.getBase64() + '">');

很难用您提供的信息给出更具体的示例，但我认为这就是您想要的。您显然必须更改不同数组的 x 和 y 限制。

Answer 2

您可以将 RGB 值数组绘制到 HTML5 canvas object and then get the contents of that canvas using the .toDataURL() canvas 方法：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <script>
"use strict";

// Here's the image data we want to draw:
var data = [
  ["#FF0000", "#00FF00"],
  ["#FFFF00", "#0000FF"]
];

// First, we need to create a canvas with the same dimensions as the image data:
var canvas = document.createElement("canvas");
canvas.height = data.length;
canvas.width = data[0].length;
//canvas.style.visibility = "hidden";
document.body.appendChild(canvas);

// Now that we have canvas to work with, we need to draw the image data into it:
var ctx = canvas.getContext("2d");
for (var y = 0; y < data.length; ++y) {
  for (var x = 0; x < data[y].length; ++x) {
    ctx.fillStyle = data[y][x];  
    ctx.fillRect(x, y, 1, 1);
  }
}

// Finally, we get the image data using the .toDataURL() canvas method:
console.log(canvas.toDataURL("image/png"));
    </script>
  </body>
</html>

Answer 3

如果要在没有库的情况下呈现 PNG 客户端，可以使用 HTML5 Canvas。

无论如何，我建议坚持使用一维数组，并存储图像的维度。它使工作变得更容易。

var pixels = [ ... ],  // your massive array
    width = 4,         // width in pixels
    height = Math.ceil(pixels.length / width),

    // Create canvas
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    imgData = context.createImageData(width, height);

canvas.height = height;
canvas.width = width;

// fill imgData with colors from array
for(var i = 0; i < pixels.length; i++) {
    // Convert pixels[i] to RGB
    // See 

    imgData[i] = r;
    imgData[i + 1] = g;
    imgData[i + 2] = b;
    imgData[i + 3] = 255; // Alpha channel
}

// put data to context at (0, 0)
context.putImageData(imgData, 0, 0);

// output image
var img = new Image();
img.src = canvas.toDataURL('image/png');

// add image to body (or whatever you want to do)
document.body.appendChild(img);

或者，如果您不能依赖像这样的相对较新的功能，或者只是觉得这太麻烦了，您可以寻求 Tom 的回答:)

Answer 4

或使用更新版本的 pnglib：

https://github.com/IjzerenHein/pnglib-es6

Answer 5

图像存储在二维数组中的解决方案，具有 RGB 颜色 as an answer to another question

var img=[[[0,0,0],[0,0,0],[0,0,0],[255,0,0],[0,0,0]],
[[0,0,0],[0,0,255],[0,0,0],[0,0,0],[255,0,0]],
[[0,0,0],[0,0,0],[0,0,0],[0,0,0],[255,0,0]],
[[0,0,0],[0,0,255],[0,0,0],[0,0,0],[255,0,0]],
[[0,0,0],[0,0,0],[0,0,0],[255,0,0],[0,0,0]]];

var pixelSize = 20;
var c = document.createElement("canvas");
c.height = img[0].length * pixelSize;
c.width = img.length * pixelSize;
document.body.appendChild(c);
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);

for (var i = 0; i < img.length; i++) {
    for (var j = 0; j < img[0].length; j++) {
        ctx.fillStyle = "rgb("+img[i][j][0]+","+img[i][j][1]+","+img[i][j][2]+")";
        ctx.fillRect(i*pixelSize, j*pixelSize, pixelSize, pixelSize);
    }
}

console.log(c.toDataURL("image/png"));
var png = document.createElement("img");
png.src = c.toDataURL("image/png");
c.remove();
document.body.appendChild(png);

JavaScript 数组转 PNG？ - 客户端

JavaScript array to PNG? - client side

javascript

arrays

png