Question

有没有办法将二维码的二维数组转换为png图像？

数组看起来像这样（只有更大）

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

从这个数组中，图像看起来应该是这样的

enter image description here

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

Answer 1

您可以将RGB值数组绘制到HTML5 canvas object，然后使用.toDataURL()画布方法获取该画布的内容：

<!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 2

如果您想要在没有库的情况下呈现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 http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

    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);

或者，如果你不能依赖这样一个相对较新的功能，或者只是发现这个太多的工作，你可以去找汤姆的答案：）

Answer 3

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 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？ - 客户端

5 个答案: