尝试将 base64 图像绘制到 canvas 时出现 HTTP 错误 431

Question

我尝试在客户端 JavaScript 中将图像（base64 格式）绘制到 canvas。不幸的是，总是出现 ERR_CONNECTION_RESET 431 (Request Header Fields Too Large) 错误。

我将 base64 图像作为对节点服务器的异步 POST 请求的响应。示例 base64 图像是：

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCA==='

但很明显 muuuuch 更长。 Chrome 开发控制台显示：

GET http://localhost:3000/'data:image/png;base64,iVBORw0KGgoAA...
net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)
Image (async)
(anonymous) @ client.js:59
async function (async)
(anonymous) @ client.js:51

我的代码是：

setInterval(async () => {

  const post_options = {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(request)
  }
  const response = await fetch('/api', post_options)
  const result = await response.json()
  const base64_response = "'" + result['image64'] + "'"

  const image = new Image()
  image.onload = () => {
    response_ctx.drawImage(image, 0, 0)
  }
  image.src = base64_response

}, 1000)

其中 canvas_ctx 是 canvas' 二维上下文，base64_response 是上述指定格式的图像。

我还应该提到，我是 JavaScript 和 Web Dev 的新手，因为我只为我的一个项目这样做。

Answer 1

image.src 接受一个包含 URL 的字符串。看起来您正在尝试使用包含数据 URL 的字符串，但是您在该字符串的内容中添加了引号，这使得它包含的 URL 无效。 431 错误是浏览器试图通过假设它是站点本地资源的名称然后从服务器请求它来理解现在损坏的 URL 的结果。

要解决此问题，

const base64_response = "'" + result['image64'] + "'"

应该是

const base64_response = result['image64']

尝试将 base64 图像绘制到 canvas 时出现 HTTP 错误 431

HTTP error 431 when trying to draw a base64 image to a canvas

javascript

base64

client-side

http-error