Question

我尝试使用客户端JavaScript将图像（base64格式）绘制到画布上。不幸的是总是出现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是画布的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']

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

1 个答案: