尝试将 unsigned long 的 ARGB 数据绘制到 HTML canvas

Trying to draw ARGB data of unsigned long to HTML canvas

我有一个 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);

theData 需要是这样创建的 ImageData objectnew ImageData(array,width,height) 其中“宽度”和“高度”在您的情况下均为 16,但“数组”是类型数组 Uint8ClampedArray.

此 ImageData 对象 实现了 ImageData 接口 根据异常消息的要求和提及。

A Uint8ClampedArray 是一个数字数组,范围从 0 到 255。要与 ImageData 一起使用,您必须在该数组中填充 1024 (16 × 16 × 4) 个这样的数字——R 为 4 , 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

要将图像数据实际绘制到 canvas 上,您可以使用 ctx.putImageData(theData,0,0)

另外:这对我来说也是新的。我建议访问 Mozilla Developer Network 以了解我自己刚刚了解的所有内容。

掩码和移位

将值提取为 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);