javascript - 尝试将 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==='

但显然更长。 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 的 2d 上下文和 base64_response是上述指定格式的图像。

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

Answer 1

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

为了解决这个问题，

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

应该

const base64_response = result['image64']