web-dev-qa-db-ja.com

base64イメージをキャンバスに描画しようとするとHTTPエラー431が発生する

クライアント側のJavaScriptでキャンバスに画像（base64形式）を描画しようとしています。残念ながら、常にERR_CONNECTION_RESET 431 (Request Header Fields Too Large)エラーが発生します。

非同期の応答としてbase64イメージを取得しますPOSTサーバーへのリクエストNodeサーバー。base64イメージの例は次のとおりです。

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

しかし明らかに明らかに長い。 Chrome Dev consoleはこれを示しています：

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の初心者であることにも言及する必要があります。これは、私のプロジェクトでのみ行うためです。

javascriptbase64client-sidehttp-error
2
Matthias Wolf

image.srcは、URLを含む文字列を取ります。データURLを含む文字列を使用しようとしているようですが、その文字列のコンテンツに引用符を追加すると、その文字列を含むURLが無効になります。 431エラーは、ブラウザがサイトローカルリソースの名前であると想定し、それをサーバーに要求することで、現在壊れているURLを理解しようとした結果です。

これを修正するには

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

する必要があります

const base64_response = result['image64']
0
Ouroborus