如何从像素颜色数组javascript创建图像 [英] How to create an image from array of pixel colors javascript

问题描述

我的图像尺寸为32 * 32并且每个像素颜色都有数组。这种颜色是红绿蓝的组合。我想在javascript中使用这个数组绘制图像。如何使用这些信息绘制图像？

I have image size 32*32 and have array of each pixel color.This color is the combination of red green blue .i want to draw image using this array in javascript. how to draw image using this information?

推荐答案

这假设你的像素颜色都是十六进制格式。如果它们不是你需要以某种方式转换它们：

This assumes that your pixel colors are all in hexadecimal format. If they aren't you'll need to convert them somehow:

var imgData = [ /* your array of pixel colors */ ],
    img = document.createElement('div'),
    i = 0, l = imgData.length,
    pixel;
img.style.cssText = 'overflow:hidden; width:32px; height:32px';
while (i < l) {
    pixel = document.createElement('div');
    pixel.style.cssText =
        'float:left; width:1px; height:1px; background-color:#' + imgData[i];
    img.appendChild(pixel);
    i += 1;
}
document.body.appendChild(img);

这篇关于如何从像素颜色数组javascript创建图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！