S3のImageがhtml2canvasとjsPDFで生成できない

0

下記のReactコードで、imageの取得をS3から行っていますが、CORSの原因と思われるブロックでうまくダウンロードしたPDFにImageが表示されません。

const handleExportToPdf = async () => { const input = document.getElementById('divToPrint'); if (input) { try { await new Promise((resolve, reject) => { const img = new Image(); img.src = imageUrl!; img.onload = resolve; img.onerror = reject; });

html2canvas(input, { useCORS: true, logging: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', // 横向きに設定 format: 'a4' // A4サイズを使用 }); const imgWidth = pdf.internal.pageSize.getWidth(); const imgHeight = (canvas.height * imgWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); pdf.save("download.pdf"); }).catch(error => { console.error('Error generating PDF', error); }); } catch (error) { console.error('Error loading image', error); } }

下記がCORS設定です。Headers, OriginsともにAllowにしています。

[ { "AllowedHeaders": [ "" ], "AllowedMethods": [ "GET", "HEAD", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "" ], "ExposeHeaders": [ "x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2", "ETag" ], "MaxAgeSeconds": 3000 } ]

エラー内容はこちらです。 4ureqzbte:1 Access to image at 'https://amplify-d5v3hy4jg4lir-mai-customerproductdetailsbu-svly8ybbtt1i.s3.ap-northeast-1.amazonaws.com/customerProductDetails/EVBattery.jpeg?x-amz-content-sha256=(ロケーション情報) ' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ARNの情報です。 arn:aws:s3:::amplify-d5v3hy4jg4lir-mai-customerproductdetailsbu-svly8ybbtt1i

どうしてでしょうか?よろしくお願いします。

已提問 1 個月前檢視次數 259 次
1 個回答
0

この質問に回答するためには、非公開情報であるリソースの詳細な調査が必要です。 次のリンクを使用して AWS のサポートケースを開いていただけますようお願い申し上げます。 https://console.aws.amazon.com/support/home#/case/create

AWS
已回答 1 個月前

您尚未登入。 登入 去張貼答案。

一個好的回答可以清楚地回答問題並提供建設性的意見回饋,同時有助於提問者的專業成長。

回答問題指南