ajax bufferarray three中loader的实现原理
ajax的返回数据的类型有五中，，在研究three的loader的时候，突然发现ajax返回的数据还有arrayBuffer数据类型，以前我只知道返回文本，，于是我查阅资料，总结了一下，，以下是我的总结：
responseType的值如下五中：
《1》“ ”和 "text" 字符创（默认）
《2》“arraybuffer” ArrayBuffer 对象 二进制数据
《3》 “blob” blob 对象 （经常用于fileReader对象读取文件的值）
《4》 “document” document 对象
《5》 “json” json对象
对于字符串的我们已经经常用了，，这节我们讲解arraybuffer： 实现three的loader的原理，这里以TGALoader为例：
// content[ offset ++ ] | content[ offset ++ ] << 8, 位运算 <<的优先级高于 | ，
// 运算过程 192 | 3 << 8 ===》 192 | 768 ， 3<<8 === 3 *Math.pow(2,8);
var
offset =
0,
header = {
id_length:
content[ offset ++ ],
colormap_type:
content[ offset ++ ],
image_type:
content[ offset ++ ],
colormap_index:
content[ offset ++ ] | content[ offset ++ ] << 8,
colormap_length:
content[ offset ++ ] | content[ offset ++ ] << 8,
colormap_size:
content[ offset ++ ],
origin:
[
content[ offset ++ ] | content[ offset ++ ] <<
8,
content[ offset ++ ] | content[ offset ++ ] <<
8
],
width:
content[ offset ++ ] | content[ offset ++ ] << 8,
height:
content[ offset ++ ] | content[ offset ++ ] << 8,
pixel_size:
content[ offset ++ ],
flags:
content[ offset ++ ]
};
var
canvas =
document.createElement("canvas");
canvas.width
= header.width;
canvas.height
= header.height;
var
ctx = canvas.getContext("2d");
var
imageData = ctx.createImageData(header.width,header.height);
// 将读取的image数据赋值给imageData
var
width = header.width;
var
i =0;
pixel_size
= header.pixel_size
>>
3;
pixel_total
= header.width
* header.height
*
pixel_size;
//arraybuffer的截取方法返回一个新的arraybuffer
var
image = content.subarray(offset);
for
(
var
y =
0;
y !== header.height;
y +=
1
) {
for
(
var
x =
0;
x !== width;
x +=
1,
i +=
4
) {
imageData.data[
( x + width * y ) * 4
+
2
] = image[ i +
0
];
imageData.data[
( x + width * y ) * 4
+
1
] = image[ i +
1
];
imageData.data[
( x + width * y ) * 4
+
0
] = image[ i +
2
];
imageData.data[
( x + width * y ) * 4
+
3
] = image[ i +
3
];
}
}
ctx.putImageData(
imageData,
0,
0
);
document.body.appendChild(canvas);
希望对大家有用，，喜欢的话，请关注我！！！！