要画布的二进制数组
Binary array to canvas
我想将 jpeg 图像从二进制数组加载到画布上(目前正在尝试使用 Uint8Array)。我一直在网上寻找解决方案,但我能找到的只是将数组转换为 base64,然后加载效率不高的图像。
这是我用于加载图像的代码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="MainImage" width="756" height="600">Your browser doesn't support html5</canvas>
<script type="text/javascript">
_Request = new XMLHttpRequest();
var url = "http://localhost/AAA/S.jpg";
try {
_Request.onreadystatechange = function() {
if (_Request.readyState == 4 && _Request.status == 200) {
var downloadedBuffer = _Request.response;
if (downloadedBuffer) {
var binaryByteArr = new Uint8Array(downloadedBuffer);
}
}
_Request.open('GET', url, true);
_Request.responseType = 'arraybuffer';
_Request.send();
} catch (e) {
}
</script>
</body>
</html>
我想将这个处理后的图像数组加载到画布上。
这只是一个示例,我的原始代码接收一个二进制数组,单个数组中包含多个 jpeg 图像,因此其他方法不起作用。
任何帮助将不胜感激
假设您有办法将二进制数组拆分为每个图像的数组(按已知长度或使用 JPEG 标头来标识新图像),您可以使用Blob
和对象 URL:
示例(基于 MDN 的此示例):
var imageData = GetTheTypedArraySomehow();
var blob = new Blob([imageData], {type: "image/jpeg"});
var url = URL.createObjectURL(blob);
现在,您可以将图像的url
设置为src
:
var img = new Image();
img.onload = function() {
/// draw image to canvas
context.drawImage(this, x, y);
}
img.src = url;
相关文章:
- 如何在映射数组中添加换行符
- javascript结合了数组和字典
- 需要帮助设置json数组
- Javascript-将类型化数组保存为blob,并作为二进制数据读回
- 使用二进制压缩布尔数组
- Javascript-如何快速构建不同正整数数组的二进制表示
- js 数组二进制插入按行和列排序
- 在 JavaScript 中将字节数组转换为二进制
- 字节到二进制字符串的 Javascript 数组
- 要画布的二进制数组
- JavaScript中的二进制数组搜索
- 你能用javascript在字符串数组中进行二进制搜索吗
- 如何从十六进制字符串构建二进制数组
- 将二进制数数组转换为相应的整数
- 如何将二进制字符串转换为bytes[]数组
- Javascript二进制搜索原型数组
- 我如何填充数组与二进制数据流从websocket
- 递归vs无递归在JS二进制搜索数组
- JavaScript:将字符转换为代码,或将字符串转换为二进制数组(数字数组)的非标准方法
- 反转一个二进制数组