标签: arraybuffer

在我的应用程序中，我使用 FileReader 上传文件并将其解析为ArrayBuffer. 文件属性保存在一个对象中，结构如下：

file: {
    name: 'fileName', // type string
    content: ArrayBuffer // read like  FileReader.readAsArrayBuffer(uploadedFile)
}

当我想将文件保存到后端时，我正在使用 axios，并发送这样的请求：

axios({
    url: "/api/v3/synchronous/commands",
    method: "POST",
    data: JSON.stringify(file),
    headers,
})

问题是当它被字符串化时，content里面的文件变成了一个空对象{}。如何解决此问题，而不必转换ArrayBuffer为其他内容，然后再将其转换回ArrayBuffer?

I am trying to upload chunks of base64 to node js server and save those chunks into one file

let chunks = [];

app.post('/api', (req, res) => {
    let {blob} = req.body;
    //converting chunks of base64 to buffer
    chunks.push(Buffer.from(blob, 'base64'));
    res.json({gotit:true})

});

app.post('/finish', (req, res) => {
    let buf = Buffer.concat(chunks);
    fs.writeFile('finalvideo.webm', buf, (err) => {
        console.log('Ahh....', err)
    });
    console.log('SAVED')
    res.json({save:true})
});

Problem with the above code is video is not playable I don't why Am I really doing something …

我正在尝试在进行 JavaScript 调用后获取要在 React 应用程序中显示的图像（PNG 格式）。代码如下。函数DeviceService.getFile返回 blob 中的文件。数据是二进制的。如何才能让这张图片在 React 中正确显示？

我尝试过转换为 Base64 但没有帮助。

DeviceService.getFile(mapOverlayImagePath, bMap1 => {
        this.setState({ MapOverlay: bMap1 })
        // this.setState({ MapOverlay: 'data:image/png;base64,' + btoa(bMap1) })
        console.log(bMap1)
      })

显示图像的 React 代码：

<img src={this.state.MapOverlay} alt="MapOverlay" />

我修改了这个函数，getFile函数如下：

export function getFile(path, cb) {
  if (typeof(cb) === 'undefined' || cb === null)
    return;

  fetch(uris.getFile() + '/?' +
    'path=' + path,
    {method: 'POST', credentials: 'include'})
    .then(reply => reply.blob())
    .then((response) => {
      if (response.data) {
        return cb(response.data);
      }
      return cb(new …

我正在尝试使用 FileReader API 将本地文件读入 ArrayBuffer，如下所示

let reader = new FileReader();

reader.onload = function(e) {
    let arrayBuffer = new Uint8Array(reader.result);
    console.log(arrayBuffer);
}

reader.readAsArrayBuffer(new File([], 'data.txt'));

但我得到一个空的 arrayBuffer

如何在浏览器中将此本地文件作为 ArrayBuffer 读取？

谢谢。

我想在 JavaScript 中修改 ArrayBuffer 的内容。

从帮助部分：

您不能直接操作 ArrayBuffer 的内容；相反，您创建一个类型化数组对象或一个以特定格式表示缓冲区的 DataView 对象，并使用它来读取和写入缓冲区的内容。

我不需要向控制台打印任何内容，我只需要一个修改了一些字节的 ArrayBuffer 。

所以，如果我有一个大的 ArrayBuffer：

const buffer = new ArrayBuffer(16*1024);

哪一种更有效：

const typedArray1 = new Uint8Array(buffer);
typedArray1[16000] = 65;

const typedArray2 = new Uint8Array(buffer,16000);
typedArray2[0] = 65;

const typedArray3 = new Uint8Array(buffer,16000,1);
typedArray2[0] = 65;

const dataView1 = new DataView(buffer);
dataView1.setUint8(16000, 65);

const dataView2 = new DataView(buffer, 16000);
dataView2.setUint8(0, 65);

const dataView3 = new DataView(buffer, 16000, 1);
dataView3.setUint8(0, 65);

我有一个要求，需要使用 Google Text to Speech 将一些文本转换为音频。

我正在使用 Nodejs 将文本转换为音频文件，并希望将音频输出发送到前端。

NodeJS代码：

const client = new textToSpeech.TextToSpeechClient();
const request = {
  input: {text: 'Hello World'},
  // Select the language and SSML voice gender (optional)
  voice: {languageCode: 'en-US', ssmlGender: 'NEUTRAL'},
  // select the type of audio encoding
  audioConfig: {audioEncoding: 'MP3'},
};

const [response] = await client.synthesizeSpeech(request);

response.audioContent包含音频数据，它是一个缓冲区对象，如下所示：

<Buffer ff f3 44 c4 00 00 00 03 48 00 00 00 00 ff 88 89 40 04 06 3d d1 38 20 e1 …

我想将 an 转换AudioBuffer为 aBlob以便我可以从中创建一个 ObjectURL ，然后下载音频文件。

let rec = new Recorder(async(chunks) => {
 var blob = new Blob(chunks, {
        type: 'audio/mp3'
      });
var arrayBuffer = await blob.arrayBuffer();
 const audioContext = new AudioContext()
 await audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {

// How to I now convert the AudioBuffer into an ArrayBuffer => Blob ?

}

我正在为 Hoymiles 监控系统开发一个网络爬虫。我可以获得的统计数据之一是历史数据，但我获得的数据格式很奇怪。经过大量研究和平台代码搜索后，我发现在发出的post请求中，除了标头和有效负载之外，他们还使用了一个参数，即responseType：“arraybuffer”。因此，经过更多研究，我发现 arraybuffer 是“一种用于表示通用、固定大小的二进制数据缓冲区的数据类型”。

我的代码如下：

def plants_data_historycal(self, authorization):\n\n    payload = \'\'\'\n        {\n            "mode":3,\n            "date":"2022-01-20"\n        }\n    \'\'\'\n\n    headers = {\n        \'Accept\': \'application/json, text/plain, */*\',\n        \'Accept-Encoding\': \'gzip, deflate, br\',\n        \'authorization\': authorization,\n        \'Content-Type\': \'application/json;charset=UTF-8\',\n        \'Origin\': \'https://global.hoymiles.com\',\n        \'Referer\': \'https://global.hoymiles.com/platform/login\',\n        \'Cookie\': cookie,\n        \'User-Agent\': \'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Mobile Safari/537.36\'\n    }\n\n    response = self.session.post(self.url+\'/pvm-data/api/0/statistics/count_station_eq\', headers=headers, data=payload)\n\n    if response.status_code != 200:\n        raise RuntimeError("A requisi\xc3\xa7\xc3\xa3o falhou: %s", response)\n\n    print(response.text)\n    data = BeautifulSoup(response.text, \'html.parser\')\n    data = json.loads(data.text)\n\n    return …

我<canvas>每 100 毫秒更新一次来自 HTTP 请求的位图图像数据：

var ctx = canvas.getContext("2d");

setInterval(() => {
    fetch('/get_image_data').then(r => r.arrayBuffer()).then(arr => {
        var byteArray = new Uint8ClampedArray(arr);
        var imgData = new ImageData(byteArray, 500, 500);
        ctx.putImageData(imgData, 0, 0);
    });
}, 100);

这在/get_image_data给出 RGBA 数据时有效。就我而言，由于 alpha 始终为 100%，因此我不会通过网络发送 A 通道。问题：

• 当请求传递 RGB 二进制数据时如何有效地做到这一点？
• 以及当请求传递灰度二进制数据时？

（我们能否避免for在 Javascript 中每秒 10 次处理兆字节数据时可能会很慢的循环？）

灰度 => RGBA 情况下的示例：每个输入值..., a, ...应替换为..., a, a, a, 255, ...输出数组中的值。

这是一个纯 JS 解决方案：1000x1000px 灰度 => RGBA …