JavaScript数组到PNG？-客户端_Javascript_Arrays_Png

JavaScript数组到PNG？-客户端

javascript arrays

JavaScript数组到PNG？-客户端,javascript,arrays,png,Javascript,Arrays,Png,有没有办法将十六进制代码的2d数组转换为png图像阵列看起来像这样（只是大得多）从这个数组中，图像应该如下所示如果该方法不能处理这样的数组，它将处理什么类型的数组？看起来很有用。您必须创建一个类似于其示例的循环： 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.c

有没有办法将十六进制代码的2d数组转换为png图像

阵列看起来像这样（只是大得多）

从这个数组中，图像应该如下所示

如果该方法不能处理这样的数组，它将处理什么类型的数组？

看起来很有用。您必须创建一个类似于其示例的循环：

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() + '">');

var p=new PNGlib（200200256）；
对于（变量x=0；x<2；x++）
对于（变量y=0；y<2；y++）
p、 缓冲区[p.index（x，y）]=p.color（/*您的颜色*/）；
文件。写（“”）；

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

您可以将RGB值数组绘制为a，然后使用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>


例子
“严格使用”；
//下面是我们要绘制的图像数据：
风险值数据=[
[“FF0000”，“00FF00”]，
[“#FFFF00”、“#0000FF”]
];
//首先，我们需要创建与图像数据具有相同尺寸的画布：
var canvas=document.createElement（“canvas”）；
canvas.height=data.length；
canvas.width=数据[0]。长度；
//canvas.style.visibility=“隐藏”；
document.body.appendChild（画布）；
//现在我们有了画布，我们需要将图像数据绘制到其中：
var ctx=canvas.getContext（“2d”）；
对于（变量y=0；y

如果要在不带库的情况下呈现PNG客户端，可以使用HTML5画布

不管怎样，我建议使用一维数组，并存储图像的维度。它使事情更容易处理

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

var pixels=[…]，//您的海量数组
宽度=4，//以像素为单位的宽度
高度=数学单元（像素.长度/宽度），
//创建画布
canvas=document.createElement（'canvas'），
context=canvas.getContext（'2d'），
imgData=context.createImageData（宽度、高度）；
canvas.height=高度；
画布宽度=宽度；
//用数组中的颜色填充imgData
对于（变量i=0；i


或者，如果您不能依赖这样一个相对较新的功能，或者只是觉得这项工作太多，您可以选择Tom的答案：）
或使用pnglib的更新版本：
以RGB颜色存储在二维阵列中的图像解决方案


var img=[[0,0,0]，[0,0,0]，[0,0,0]，[255,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（“画布”）；
c、 高度=img[0]。长度*像素大小；
c、 宽度=img.length*像素大小；
文件.正文.附件（c）；
var ctx=c.getContext（“2d”）；
ctx.clearRect（0，0，c.宽度，c.高度）；
对于（变量i=0；idocument.body.appendChild（png）…这样的PNG图像会是什么样子？这些颜色数组代表什么？第一个维度是x，第二个维度是Y共享你的研究对每个人都有帮助。告诉我们您尝试了什么，以及为什么它不能满足您的需求。这表明你花了时间来帮助自己，它使我们避免重复显而易见的答案，最重要的是，它帮助你得到一个更具体和相关的答案！另见。就目前而言，这个问题太宽泛了，有太多不同的答案可以解决这个问题。如果您想要客户端或服务器解决方案，以及它是否应该是纯javascript解决方案，则应该添加。代码中有三种输入错误：putImagedata
->putImagedata
，todata
L是canvas
的函数，而不是context
和循环中的imgData。需要对数据进行操作，而不仅仅是imgData。
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);