gpt4 book ai didi

javascript - 二进制数组到 Canvas

转载 作者:可可西里 更新时间:2023-11-01 12:49:18 25 4
gpt4 key购买 nike

我想从二进制数组(目前正在尝试使用 Uint8Array)将 jpeg 图像加载到 Canvas 上。我一直在网上寻找解决方案,但我能找到的只是将数组转换为 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>

我想将这个经过处理的图像数组加载到 Canvas 上。

这只是一个示例,我的原始代码在一个数组中接收一个包含多个 jpeg 图像的二进制数组,因此其他方法将不起作用。

任何帮助将不胜感激

最佳答案

假设您有办法将二进制数组拆分为每个图像的数组(通过已知长度或使用 JPEG header 来识别新图像),您可以使用 Blob 和对象 URL:

示例(基于 this example from 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 - 二进制数组到 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18976327/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com