我有一个unsigned_long ARGB数据数组。所以这里的数据是16 x 16图像，因此它的16 ^ 2个元素= 256。
我无法将其绘制到数据中，ctx.createImageData(theData)正在投掷Exception: TypeError: Argument 1 of CanvasRenderingContext2D.createImageData does not implement interface ImageData.
这是我的代码：
function drawARGBData(theData) {
//theData is an array of size width x height
//must be square image, so like 16 by 16
var doc = document;
var canvas = doc.createElement('canvas');
doc.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
canvas.width = Math.pow(theData.length, 0.5);
canvas.height = Math.pow(theData.length, 0.5);
ctx.createImageData(theData);
}
var argbData_16by16 = [
'16777215',
'50331648',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'50331648',
'16777215',
'117440512',
'18446744073529823931',
'18446744073695757494',
'18446744073702049907',
'18446744073706972004',
'18446744073697459863',
'18446744073697861829',
'18446744073700887771',
'18446744073700821978',
'18446744073696939192',
'18446744073697191287',
'18446744073704609876',
'18446744073708880971',
'18446744073709208895',
'18446744073603027557',
'117440512',
'520093696',
'18446744073707627114',
'18446744073706307642',
'18446744073707882278',
'18446744073700534358',
'18446744073693656498',
'18446744073696154558',
'18446744073699509204',
'18446744073699509204',
'18446744073695560369',
'18446744073693387160',
'18446744073693253257',
'18446744073699420739',
'18446744073708951059',
'18446744073709414460',
'520093696',
'587202560',
'18446744073707551525',
'18446744073707352597',
'18446744073707352592',
'18446744073700988478',
'18446744073693586584',
'18446744073697795765',
'18446744073699442897',
'18446744073699508947',
'18446744073695954868',
'18446744073693386904',
'18446744073693648790',
'18446744073693318539',
'18446744073696857935',
'18446744073708881935',
'587202560',
'587202560',
'18446744073707485220',
'18446744073707418395',
'18446744073706891281',
'18446744073706425097',
'18446744073707345161',
'18446744073704531761',
'18446744073699046598',
'18446744073698324168',
'18446744073696546743',
'18446744073696545716',
'18446744073698915275',
'18446744073697992127',
'18446744073693117300',
'18446744073705326624',
'587202560',
'654311424',
'18446744073707484962',
'18446744073707418395',
'18446744073707418395',
'18446744073707885140',
'18446744073708550015',
'18446744073701858961',
'18446744073699244237',
'18446744073697994179',
'18446744073698783690',
'18446744073698914762',
'18446744073696807346',
'18446744073698122943',
'18446744073694828680',
'18446744073706314294',
'654311424',
'654311424',
'18446744073707484961',
'18446744073707418395',
'18446744073707484959',
'18446744073707227449',
'18446744073698777775',
'18446744073698979529',
'18446744073699045578',
'18446744073699045578',
'18446744073698650566',
'18446744073693646990',
'18446744073693712013',
'18446744073695224729',
'18446744073697987759',
'18446744073708161575',
'654311424',
'687865856',
'18446744073707418911',
'18446744073706628121',
'18446744073706041131',
'18446744073705459278',
'18446744073698054320',
'18446744073698714307',
'18446744073698780612',
'18446744073698780612',
'18446744073698714563',
'18446744073696014754',
'18446744073693117053',
'18446744073693576313',
'18446744073695482750',
'18446744073708749070',
'687865856',
'704643072',
'18446744073703796493',
'18446744073703464706',
'18446744073700791369',
'18446744073697854638',
'18446744073697987762',
'18446744073698317499',
'18446744073698383548',
'18446744073698383548',
'18446744073698317756',
'18446744073697066154',
'18446744073693048947',
'18446744073692981351',
'18446744073701911603',
'18446744073709003020',
'704643072',
'721420288',
'18446744073704451076',
'18446744073705305601',
'18446744073706038045',
'18446744073698827363',
'18446744073697388940',
'18446744073698830196',
'18446744073702503249',
'18446744073700997739',
'18446744073697590183',
'18446744073696799906',
'18446744073693507184',
'18446744073692912989',
'18446744073707961160',
'18446744073709070346',
'721420288',
'754974720',
'18446744073706424325',
'18446744073707277312',
'18446744073707348239',
'18446744073707418395',
'18446744073707418395',
'18446744073707418395',
'18446744073707287325',
'18446744073707295294',
'18446744073698368621',
'18446744073692912481',
'18446744073692780636',
'18446744073693238859',
'18446744073708885589',
'18446744073709137681',
'754974720',
'771751936',
'18446744073707482647',
'18446744073707544331',
'18446744073707413517',
'18446744073703663880',
'18446744073704059402',
'18446744073704654868',
'18446744073702755885',
'18446744073696790647',
'18446744073694951036',
'18446744073692779609',
'18446744073695995961',
'18446744073703812899',
'18446744073709282817',
'18446744073709072423',
'771751936',
'805306368',
'18446744073707418650',
'18446744073707352597',
'18446744073707417624',
'18446744073706301726',
'18446744073698554672',
'18446744073693238865',
'18446744073695671171',
'18446744073693831018',
'18446744073695670659',
'18446744073696980549',
'18446744073706696221',
'18446744073708214284',
'18446744073708615680',
'18446744073709277532',
'805306368',
'822083584',
'18446744073707485212',
'18446744073707352592',
'18446744073707418390',
'18446744073707352595',
'18446744073707418393',
'18446744073704332580',
'18446744073699801657',
'18446744073700326456',
'18446744073702165039',
'18446744073706892829',
'18446744073707418650',
'18446744073707881733',
'18446744073708679704',
'18446744073709417314',
'822083584',
'520093696',
'18446744073603404600',
'18446744073706757147',
'18446744073707353372',
'18446744073707485472',
'18446744073707485468',
'18446744073707617831',
'18446744073707684400',
'18446744073707684401',
'18446744073707617837',
'18446744073707551527',
'18446744073707415827',
'18446744073707949578',
'18446744073709418781',
'18446744073604998444',
'520093696',
'50331648',
'822083584',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'822083584',
'50331648'
];
drawARGBData(argbData_16by16);
答案 0 :(得分：1)
theData需要是ImageData object，其创建如下：new ImageData(array,width,height)其中“width”和“height”在您的情况下均为16，但“array”是类型化数组Uint8ClampedArray。
此ImageData对象根据需要实现ImageData接口并由异常消息提及。
A Uint8ClampedArray是一个数字范围从0到255的数组。要与ImageData一起使用，您必须使用1024（16×16×4）这样的数字填充该数组 - 对于R，G ，B，A。
构造ImageData对象并创建图像数据将如下所示：
var image_data_object = new ImageData(
new Uint8ClampedArray([
/* Red, Green, Blue, Alpha, repeating in that order, pixel by pixel. */
r_0,g_0,b_0,a_0,
r_1,g_1,b_1,a_1,
255,0,0,255, // represents red
102,51,153,127, // represents semitransparent rebeccapurple
/* etc. */
r_n,g_n,b_n,a_n
]),
16,
16);
然后是函数调用：
drawARGBData(image_data_object);
注意：这不是ARGB，而是RGBA。
要将图像数据实际绘制到画布上，您可以使用ctx.putImageData(theData,0,0)。
另外：这对我来说也是新的。我建议您访问Mozilla Developer Network以了解我自己所知道的所有内容。
答案 1 :(得分：1)
简单的移位操作，为每个值条目提取值r，g和b：
// assumes big-endian byte-order for ARGB
var uint32 = argbData_16by16[i], // i represents the iterator
r = (uint32 & 0xff0000)>>>16;
g = (uint32 & 0xff00)>>>8,
b = uint32 & 0xff,
a = (uint32 & 0xff000000)>>>24;
function drawARGBData(theData) {
//theData is an array of size width x height
//must be square image, so like 16 by 16
var doc = document;
var canvas = doc.createElement('canvas');
doc.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
canvas.width = 16;
canvas.height = 16;
var idata = ctx.createImageData(16, 16);
for(var i = 0, t = 0; i < theData.length; i++) {
var uint32 = +theData[i]; // convert to number right away (source is string here)
idata.data[t++] = (uint32 & 0xff0000)>>>16;
idata.data[t++] = (uint32 & 0xff00)>>>8;
idata.data[t++] = uint32 & 0xff;;
idata.data[t++] = (uint32 & 0xff000000)>>>24;
}
ctx.putImageData(idata, 0, 0);
}
var argb_16x16_LONG = [
'16777215',
'50331648',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'117440512',
'50331648',
'16777215',
'117440512',
'-179727685',
'-13794122',
'-7501709',
'-2579612',
'-12091753',
'-11689787',
'-8663845',
'-8729638',
'-12612424',
'-12360329',
'-4941740',
'-670645',
'-342721',
'-106524059',
'117440512',
'520093696',
'-1924502',
'-3243974',
'-1669338',
'-9017258',
'-15895118',
'-13397058',
'-10042412',
'-10042412',
'-13991247',
'-16164456',
'-16298359',
'-10130877',
'-600557',
'-137156',
'520093696',
'587202560',
'-2000091',
'-2199019',
'-2199024',
'-8563138',
'-15965032',
'-11755851',
'-10108719',
'-10042669',
'-13596748',
'-16164712',
'-15902826',
'-16233077',
'-12693681',
'-669681',
'587202560',
'587202560',
'-2066396',
'-2133221',
'-2660335',
'-3126519',
'-2206455',
'-5019855',
'-10505018',
'-11227448',
'-13004873',
'-13005900',
'-10636341',
'-11559489',
'-16434316',
'-4224992',
'587202560',
'654311424',
'-2066654',
'-2133221',
'-2133221',
'-1666476',
'-1001601',
'-7692655',
'-10307379',
'-11557437',
'-10767926',
'-10636854',
'-12744270',
'-11428673',
'-14722936',
'-3237322',
'654311424',
'654311424',
'-2066655',
'-2133221',
'-2066657',
'-2324167',
'-10773841',
'-10572087',
'-10506038',
'-10506038',
'-10901050',
'-15904626',
'-15839603',
'-14326887',
'-11563857',
'-1390041',
'654311424',
'687865856',
'-2132705',
'-2923495',
'-3510485',
'-4092338',
'-11497296',
'-10837309',
'-10771004',
'-10771004',
'-10837053',
'-13536862',
'-16434563',
'-15975303',
'-14068866',
'-802546',
'687865856',
'704643072',
'-5755123',
'-6086910',
'-8760247',
'-11696978',
'-11563854',
'-11234117',
'-11168068',
'-11168068',
'-11233860',
'-12485462',
'-16502669',
'-16570265',
'-7640013',
'-548596',
'704643072',
'721420288',
'-5100540',
'-4246015',
'-3513571',
'-10724253',
'-12162676',
'-10721420',
'-7048367',
'-8553877',
'-11961433',
'-12751710',
'-16044432',
'-16638627',
'-1590456',
'-481270',
'721420288',
'754974720',
'-3127291',
'-2274304',
'-2203377',
'-2133221',
'-2133221',
'-2133221',
'-2264291',
'-2256322',
'-11182995',
'-16639135',
'-16770980',
'-16312757',
'-666027',
'-413935',
'754974720',
'771751936',
'-2068969',
'-2007285',
'-2138099',
'-5887736',
'-5492214',
'-4896748',
'-6795731',
'-12760969',
'-14600580',
'-16772007',
'-13555655',
'-5738717',
'-268799',
'-479193',
'771751936',
'805306368',
'-2132966',
'-2199019',
'-2133992',
'-3249890',
'-10996944',
'-16312751',
'-13880445',
'-15720598',
'-13880957',
'-12571067',
'-2855395',
'-1337332',
'-935936',
'-274084',
'805306368',
'822083584',
'-2066404',
'-2199024',
'-2133226',
'-2199021',
'-2133223',
'-5219036',
'-9749959',
'-9225160',
'-7386577',
'-2658787',
'-2132966',
'-1669883',
'-871912',
'-134302',
'822083584',
'520093696',
'-106147016',
'-2794469',
'-2198244',
'-2066144',
'-2066148',
'-1933785',
'-1867216',
'-1867215',
'-1933779',
'-2000089',
'-2135789',
'-1602038',
'-132835',
'-104553172',
'520093696',
'50331648',
'822083584',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'1493172224',
'822083584',
'50331648'
];
drawARGBData(argb_16x16_LONG);