クライアント側の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の初心者であることにも言及する必要があります。これは、私のプロジェクトでのみ行うためです。
image.src
は、URLを含む文字列を取ります。データURLを含む文字列を使用しようとしているようですが、その文字列のコンテンツに引用符を追加すると、その文字列を含むURLが無効になります。 431エラーは、ブラウザがサイトローカルリソースの名前であると想定し、それをサーバーに要求することで、現在壊れているURLを理解しようとした結果です。
これを修正するには
const base64_response = "'" + result['image64'] + "'"
する必要があります
const base64_response = result['image64']