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

0

下記のコードで、行っていますが、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);
  }
}

};

const loadImage = async () => { try { if (imageFileName) { const { url } = await getUrl({ path: customerProductDetails/${imageFileName}, options: { expiresIn: 3600, // URLの有効期限を秒単位で設定 validateObjectExistence: true, }, }); setImageUrl(url.href); } } catch (error) { console.error('Error loading image from S3:', error); } };

useEffect(() => { loadImage(); }, [imageFileName]);

CORSは下記です。 [ { "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 } ]

また、Block public access (bucket settings)は、OFFにしましたが、それでもうまくいきませんでした。(今はONですが)

エラー内容です Access to image at ' ' from origin 'http://localhost:5175' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Originは*なので全て通るはずですが...。

何が原因なのでしょうか?

質問済み 1ヶ月前442ビュー
1回答
0

お問い合わせいただきありがとうございます。 本事象の原因や対策についてご案内いたします。 ご提示いただいたS3のCORSポリシーを拝見し、以下のことを確認いたしました。 ・提示いただいたCORSポリシー [{ "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 }] 確認できた情報 "AllowedHeaders": [""]に記載がない。 "AllowedOrigins": [""]に記載がない。

一般的に下記の例[1]のようにCORS設定を行うため、お客様のユースケースに合わせて修正する必要がございますが、まずは通信を確認するためには"AllowedHeaders"や"AllowedOrigins"の値を「*」に変更していただき、再度処理が正常に行われるかご確認いただきますと幸いです。

[1]Extend S3 resources - React - AWS Amplify Gen 2 Documentation https://docs.amplify.aws/react/build-a-backend/storage/extend-s3-resources/ 例 [{ "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 }] もし、本案内で事象が解決しない場合はリソースの詳細を調査が必要を行いますので、サポートケースを起票していただきますと幸いです[2]。 本事象はS3のCORSポリシーに関する内容でございますため、サービスを「Simple Storage Service(S3)」で起票してくださいませ。 なお、その場合は当該S3バケットのARNやエラーログの全文を記載していただきますと幸いです。

[2]Create Case | AWS Support Console https://support.console.aws.amazon.com/support/home#/case/create

AWS
回答済み 1ヶ月前

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン

関連するコンテンツ