У меня есть массив данных ARGB без знака. Таким образом, эти данные здесь 16 х 16 изображение так его 16^2 элементов = 256.Попытка нарисовать ARGB-данные без знака длинным для HTML-холста

Я не в состоянии сделать его данным, 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);

источник

2015-03-07 Noitidart

маска и сдвиг

Простой операции сдвига для извлечения значения, как 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 = [ 
 
\t '16777215', 
 
\t '50331648', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '117440512', 
 
\t '50331648', 
 
\t '16777215', 
 
\t '117440512', 
 
\t '-179727685', 
 
\t '-13794122', 
 
\t '-7501709', 
 
\t '-2579612', 
 
\t '-12091753', 
 
\t '-11689787', 
 
\t '-8663845', 
 
\t '-8729638', 
 
\t '-12612424', 
 
\t '-12360329', 
 
\t '-4941740', 
 
\t '-670645', 
 
\t '-342721', 
 
\t '-106524059', 
 
\t '117440512', 
 
\t '520093696', 
 
\t '-1924502', 
 
\t '-3243974', 
 
\t '-1669338', 
 
\t '-9017258', 
 
\t '-15895118', 
 
\t '-13397058', 
 
\t '-10042412', 
 
\t '-10042412', 
 
\t '-13991247', 
 
\t '-16164456', 
 
\t '-16298359', 
 
\t '-10130877', 
 
\t '-600557', 
 
\t '-137156', 
 
\t '520093696', 
 
\t '587202560', 
 
\t '-2000091', 
 
\t '-2199019', 
 
\t '-2199024', 
 
\t '-8563138', 
 
\t '-15965032', 
 
\t '-11755851', 
 
\t '-10108719', 
 
\t '-10042669', 
 
\t '-13596748', 
 
\t '-16164712', 
 
\t '-15902826', 
 
\t '-16233077', 
 
\t '-12693681', 
 
\t '-669681', 
 
\t '587202560', 
 
\t '587202560', 
 
\t '-2066396', 
 
\t '-2133221', 
 
\t '-2660335', 
 
\t '-3126519', 
 
\t '-2206455', 
 
\t '-5019855', 
 
\t '-10505018', 
 
\t '-11227448', 
 
\t '-13004873', 
 
\t '-13005900', 
 
\t '-10636341', 
 
\t '-11559489', 
 
\t '-16434316', 
 
\t '-4224992', 
 
\t '587202560', 
 
\t '654311424', 
 
\t '-2066654', 
 
\t '-2133221', 
 
\t '-2133221', 
 
\t '-1666476', 
 
\t '-1001601', 
 
\t '-7692655', 
 
\t '-10307379', 
 
\t '-11557437', 
 
\t '-10767926', 
 
\t '-10636854', 
 
\t '-12744270', 
 
\t '-11428673', 
 
\t '-14722936', 
 
\t '-3237322', 
 
\t '654311424', 
 
\t '654311424', 
 
\t '-2066655', 
 
\t '-2133221', 
 
\t '-2066657', 
 
\t '-2324167', 
 
\t '-10773841', 
 
\t '-10572087', 
 
\t '-10506038', 
 
\t '-10506038', 
 
\t '-10901050', 
 
\t '-15904626', 
 
\t '-15839603', 
 
\t '-14326887', 
 
\t '-11563857', 
 
\t '-1390041', 
 
\t '654311424', 
 
\t '687865856', 
 
\t '-2132705', 
 
\t '-2923495', 
 
\t '-3510485', 
 
\t '-4092338', 
 
\t '-11497296', 
 
\t '-10837309', 
 
\t '-10771004', 
 
\t '-10771004', 
 
\t '-10837053', 
 
\t '-13536862', 
 
\t '-16434563', 
 
\t '-15975303', 
 
\t '-14068866', 
 
\t '-802546', 
 
\t '687865856', 
 
\t '704643072', 
 
\t '-5755123', 
 
\t '-6086910', 
 
\t '-8760247', 
 
\t '-11696978', 
 
\t '-11563854', 
 
\t '-11234117', 
 
\t '-11168068', 
 
\t '-11168068', 
 
\t '-11233860', 
 
\t '-12485462', 
 
\t '-16502669', 
 
\t '-16570265', 
 
\t '-7640013', 
 
\t '-548596', 
 
\t '704643072', 
 
\t '721420288', 
 
\t '-5100540', 
 
\t '-4246015', 
 
\t '-3513571', 
 
\t '-10724253', 
 
\t '-12162676', 
 
\t '-10721420', 
 
\t '-7048367', 
 
\t '-8553877', 
 
\t '-11961433', 
 
\t '-12751710', 
 
\t '-16044432', 
 
\t '-16638627', 
 
\t '-1590456', 
 
\t '-481270', 
 
\t '721420288', 
 
\t '754974720', 
 
\t '-3127291', 
 
\t '-2274304', 
 
\t '-2203377', 
 
\t '-2133221', 
 
\t '-2133221', 
 
\t '-2133221', 
 
\t '-2264291', 
 
\t '-2256322', 
 
\t '-11182995', 
 
\t '-16639135', 
 
\t '-16770980', 
 
\t '-16312757', 
 
\t '-666027', 
 
\t '-413935', 
 
\t '754974720', 
 
\t '771751936', 
 
\t '-2068969', 
 
\t '-2007285', 
 
\t '-2138099', 
 
\t '-5887736', 
 
\t '-5492214', 
 
\t '-4896748', 
 
\t '-6795731', 
 
\t '-12760969', 
 
\t '-14600580', 
 
\t '-16772007', 
 
\t '-13555655', 
 
\t '-5738717', 
 
\t '-268799', 
 
\t '-479193', 
 
\t '771751936', 
 
\t '805306368', 
 
\t '-2132966', 
 
\t '-2199019', 
 
\t '-2133992', 
 
\t '-3249890', 
 
\t '-10996944', 
 
\t '-16312751', 
 
\t '-13880445', 
 
\t '-15720598', 
 
\t '-13880957', 
 
\t '-12571067', 
 
\t '-2855395', 
 
\t '-1337332', 
 
\t '-935936', 
 
\t '-274084', 
 
\t '805306368', 
 
\t '822083584', 
 
\t '-2066404', 
 
\t '-2199024', 
 
\t '-2133226', 
 
\t '-2199021', 
 
\t '-2133223', 
 
\t '-5219036', 
 
\t '-9749959', 
 
\t '-9225160', 
 
\t '-7386577', 
 
\t '-2658787', 
 
\t '-2132966', 
 
\t '-1669883', 
 
\t '-871912', 
 
\t '-134302', 
 
\t '822083584', 
 
\t '520093696', 
 
\t '-106147016', 
 
\t '-2794469', 
 
\t '-2198244', 
 
\t '-2066144', 
 
\t '-2066148', 
 
\t '-1933785', 
 
\t '-1867216', 
 
\t '-1867215', 
 
\t '-1933779', 
 
\t '-2000089', 
 
\t '-2135789', 
 
\t '-1602038', 
 
\t '-132835', 
 
\t '-104553172', 
 
\t '520093696', 
 
\t '50331648', 
 
\t '822083584', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '1493172224', 
 
\t '822083584', 
 
\t '50331648' 
 
]; 
 
drawARGBData(argb_16x16_LONG);

источник

2015-03-07 23:53:21 K3N

Спасибо Кен! Да, это фактически номера 'UInt64', которые я пытаюсь войти в JS. – Noitidart

Я получил изображение как LONG: https://gist.github.com/Noitidart/7d4e32cde6179b600331, но теперь у нас есть отрицательные числа, было бы хорошо? – Noitidart

@Noitidart они будут преобразованы в unsigned (он будет обрабатывать бит знака как обычный бит). Вы можете увидеть это в консоли: '(-1 >>> 0) .toString (16)' или просто '-1 >>> 0'. Это закончится с 0xffffffff 'var a = new Uint32Array ([- 1])' – K3N

theData должен быть ImageData object который создается следующим образом: new ImageData(array,width,height) где «ширина» и «высота» равны 16 в вашем случае, но «массив» - типизированный массив Uint8ClampedArray.

Этот объект ImageData реализует интерфейс ImageData по необходимости и указан в сообщении об исключении.

A Uint8ClampedArray - это массив чисел от 0 до 255. Для использования с ImageData вы должны иметь этот массив, заполненный 1024 (16 × 16 × 4) таких чисел-4 для R, G, B, А.

Построение объекта 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 для таких вещей, где я только что узнал обо всем этом для себя.

источник

2015-03-07 22:07:59 Xufox

Благодарности Xufox я использовал это страница MDN, но застревает. – Noitidart

Попытка нарисовать ARGB-данные без знака длинным для HTML-холста

ответ

маска и сдвиг

Смежные вопросы