3
htm2canvasを使用して、画像付きの特定のdivをキャンバスに変換しています。画像がローカルの場合に動作します。 「いいえ 『をアクセス制御 - 許可 - 起源』ヘッダは、要求されたリソース上に存在する起源http://mywebsite.com：私はこの問題を取得して、原点から 『https://mybucket.s3.amazonaws.com/B008C4GFP0.jpg』での画像へdiv内のamazon s3画像をキャンバスに変換する際に発生するクロス起点問題
「アクセス 『http://mywebsite.com』はCORSポリシーによってブロックされていています。したがって、アクセスは許可されません。
アマゾンからの画像の場合。
私はこのクロスオリジンの問題を解決するには
<div> <img id="img1" src="https://mybucket.s3.amazonaws.com/B008C4GFP0.jpg" style="width:100%; height:100%;position:relative;"> <img id="img2" src="https://mybucket.s3.amazonaws.com/B00HXT858A.jpg" style="width:100%; height:100%;position:relative;"> </div>
My html to canvas code is
`
html2canvas(element, {
useCORS: true,
allowTaint:true,
onrendered: function (canvas) {
getCanvas = canvas;
var content = $("#TempPublishedItems").html();
var image = getCanvas.toDataURL("image/jpg");
var image1 = document.createElement("IMG");
image1.src = getCanvas.toDataURL("image/jpg");
},
proxy: 'https://html2canvas.appspot.com/query',
logging: true
});
`
をキャンバスにcoverting午前ディビジョンIは、Amazon S3のCORS設定で
`<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>https://mywebsite.com</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
</CORSRule>
</CORSConfiguration>
`
をこのコードを試してみました、私はこの問題を解決する助けてくださいアマゾンs3の画像とクロスオリジンの問題。
