ユーザーが画像の外部 URL を貼り付けることができるフォームがあります。javascript を使用してそのファイルを取得し、REST API に POST することは可能ですか? 残りの API には parse.com を使用しています。
2 に答える
2
… 画像の外部 URL。JavaScript を介してそのファイルを取得することは可能ですか …</p>
いいえ。これは同一オリジン ポリシーによって防止されており、アクセスは許可されません。その URL を REST API に投稿し、サーバー側で取得するだけです。
それに関連付けられたファイルやデータにアクセスすることはできませんが、もちろん<img>
要素を介して埋め込むことで表示できます。
于 2012-12-23T20:51:26.010 に答える
1
いずれにせよ、クロスオリジンリソースの操作には制限があるため、最初にイメージをサーバーにプルする必要があります。これを行ったら、私の手の込んだ例を使用して、画像を変換し、サーバーに転送する準備ができている文字列Base64
に変換できます。JSON
POST
REST
<input id="urlText" />
<input id="sendData" type="submit" />
<img id="img" src="http://fiddle.jshell.net/img/logo.png" />
<script>
var imgElem = document.getElementById('img');
$('#urlText').keyup(function(){
$('#img').attr('src',$('#urlText').val());
});
$('#sendData').click(function(){
var imgData = JSON.stringify(getBase64Image(imgElem));
$.ajax({
url: 'http://url.com/rest/api',
dataType: 'json',
data: imgData,
type: 'POST',
success: function(data) {
console.log(data);
}
});
});
function getBase64Image(imgElem) {
// imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
var canvas = document.createElement("canvas");
canvas.width = imgElem.clientWidth;
canvas.height = imgElem.clientHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(imgElem, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
</script>
私のjsFiddleの例はここにあります。
于 2012-12-23T20:43:06.747 に答える