Buffer转成ArrayBuffer后再转成Blob

本文介绍了如何在前端将Node.js的Buffer转换为ArrayBuffer,然后进一步转化为Blob,以便在错误处理中使用。示例中,前端通过ajax从后端获取文件数据,当后端返回错误时,前端需要将Buffer转换为Blob来处理错误信息。问题在于如何在不改变responseType的情况下,将Buffer转为Blob,以便能像处理json那样读取错误信息。
摘要由CSDN通过智能技术生成

Buffer  -> ArrayBuffer

const arraybuffer = new Int8Array(buffer.data);

ArrayBuffer  -> Blob

const blob = new Blob([arraybuffer], { type : 'application/pdf'});

项目案例:前端通过 ajax(responseType = 'blob')获取文件数据进行下载。代码如下,downloadFromS3 是共通方法通过 AWS S3 获取文件,因为返回的是 nodejs 的 Buffer 类型。前端 ajax 会自动转换为 blob 类型,所以没有问题。

但是现在后端可能会报 error ,想让前端截获 error ,这时前端会将 error 信息转换成 blob。如果读取 blob 信息也可以获取 error 信息,但是有没有其它方法,比如 responseType = 'json' 就可以正常读到 error 信息,但是前端怎么将 buffer 转换为 blob 呢?

后端 express.js

app.get('/', async (req, res) => {
  const pdf = await downloadFromS3("pdf/胡雨南的简历.pdf");
  res.send(pdf);
})

前端 index.js

<
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
将音频Blob对象转换ArrayBuffer与上面的示例相同,可以使用上面提到的`blobToArrayBuffer`函数。接下来,需要使用Web Audio API来读取ArrayBuffer并显示波形。 具体实现步骤如下: 1. 创建一个AudioContext对象。 ```javascript var audioContext = new AudioContext(); ``` 2. 创建一个AudioBufferSourceNode节点,并将其连接到AudioContext的destination。 ```javascript var sourceNode = audioContext.createBufferSource(); sourceNode.connect(audioContext.destination); ``` 3. 将ArrayBuffer转换为AudioBuffer对象。 ```javascript audioContext.decodeAudioData(arrayBuffer, function(decodedData) { sourceNode.buffer = decodedData; }); ``` 4. 使用AnalyserNode节点来获取音频数据。 ```javascript var analyserNode = audioContext.createAnalyser(); analyserNode.fftSize = 2048; // 设置FFT大小 sourceNode.connect(analyserNode); ``` 5. 使用Canvas绘制波形。 ```javascript var canvas = document.getElementById("canvas"); var canvasContext = canvas.getContext("2d"); function draw() { requestAnimationFrame(draw); var bufferLength = analyserNode.frequencyBinCount; var dataArray = new Uint8Array(bufferLength); analyserNode.getByteTimeDomainData(dataArray); canvasContext.fillStyle = "rgb(200, 200, 200)"; canvasContext.fillRect(0, 0, canvas.width, canvas.height); canvasContext.lineWidth = 2; canvasContext.strokeStyle = "rgb(0, 0, 0)"; canvasContext.beginPath(); var sliceWidth = canvas.width * 1.0 / bufferLength; var x = 0; for(var i = 0; i < bufferLength; i++) { var v = dataArray[i] / 128.0; var y = v * canvas.height/2; if(i === 0) { canvasContext.moveTo(x, y); } else { canvasContext.lineTo(x, y); } x += sliceWidth; } canvasContext.lineTo(canvas.width, canvas.height/2); canvasContext.stroke(); } draw(); ``` 这里创建了一个canvas元素,并使用Canvas绘制音频波形。需要注意的是,绘制波形的代码需要在音频数据解码完成后调用,并且需要使用requestAnimationFrame函数来不断绘制波形。完整的代码如下: ```javascript var audioContext = new AudioContext(); function blobToArrayBuffer(blob, callback) { var reader = new FileReader(); reader.onload = function() { callback(reader.result); } reader.readAsArrayBuffer(blob); } function drawWaveform(arrayBuffer) { var sourceNode = audioContext.createBufferSource(); sourceNode.connect(audioContext.destination); audioContext.decodeAudioData(arrayBuffer, function(decodedData) { sourceNode.buffer = decodedData; var analyserNode = audioContext.createAnalyser(); analyserNode.fftSize = 2048; sourceNode.connect(analyserNode); var canvas = document.getElementById("canvas"); var canvasContext = canvas.getContext("2d"); function draw() { requestAnimationFrame(draw); var bufferLength = analyserNode.frequencyBinCount; var dataArray = new Uint8Array(bufferLength); analyserNode.getByteTimeDomainData(dataArray); canvasContext.fillStyle = "rgb(200, 200, 200)"; canvasContext.fillRect(0, 0, canvas.width, canvas.height); canvasContext.lineWidth = 2; canvasContext.strokeStyle = "rgb(0, 0, 0)"; canvasContext.beginPath(); var sliceWidth = canvas.width * 1.0 / bufferLength; var x = 0; for(var i = 0; i < bufferLength; i++) { var v = dataArray[i] / 128.0; var y = v * canvas.height/2; if(i === 0) { canvasContext.moveTo(x, y); } else { canvasContext.lineTo(x, y); } x += sliceWidth; } canvasContext.lineTo(canvas.width, canvas.height/2); canvasContext.stroke(); } draw(); }); } var audioBlob = new Blob([/*音频数据*/], {type: "audio/wav"}); blobToArrayBuffer(audioBlob, function(arrayBuffer) { drawWaveform(arrayBuffer); }); ``` 这里的`audioBlob`变量是一个包含音频数据的Blob对象,需要将其替换为实际的音频Blob对象。同时,需要在HTML代码中添加一个canvas元素: ```html <canvas id="canvas"></canvas> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值