URL에서 이미지를 읽고 JavaScript/Ajax를 사용하여 업로드하는 적절한 방법을 찾을 수 없습니다.URL에서 이미지 읽기 & 업로드
URL : https://pbs.twimg.com/profile_images/1580483969/parisjs_transparent.png
이 있다고 가정합니다.
나는 그것을 지금 업로드 할 수 있어야한다. 그러나 나는 그것을 다운로드해야 할 필요가있다. 그래서 나는 그 절차를 어떻게해야 할까?
URL에서 이미지를 읽고 JavaScript/Ajax를 사용하여 업로드하는 적절한 방법을 찾을 수 없습니다.URL에서 이미지 읽기 & 업로드
URL : https://pbs.twimg.com/profile_images/1580483969/parisjs_transparent.png
이 있다고 가정합니다.
나는 그것을 지금 업로드 할 수 있어야한다. 그러나 나는 그것을 다운로드해야 할 필요가있다. 그래서 나는 그 절차를 어떻게해야 할까?
서버에서 이미지를 다운로드/업로드 할 수 있습니다. 당신이해야 할 일은 이미지 URL을위한 텍스트 입력 필드를 만드는 것입니다. AJAX를 통해 URL 만 백엔드로 보내고 서버는 그 내용을 가져옵니다. @DheerajAgrawal
이 예제를 참조하십시오 http://jsfiddle.net/WQXXT/3004/
당신이 그것을 말한다 곳, 사용자 정의해야: 원격 서버가 CORS 요청을 허용하는 경우 원격을 다운로드 할 수 있습니다,
alert('start upload script here');
을 이미지를 읽고 그 내용을 읽으십시오. 원격 서버에서 CORS를 허용하지 않으면 표준 <img src="..">
태그를 사용하여 이미지를 표시 할 수 있지만 내용을 읽을 수는 없습니다 (canvas gets tainted). 자바 스크립트를 사용하여 원격 URL에서
function getImageFormUrl(url, callback) {
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function (a) {
\t var canvas = document.createElement("canvas");
\t canvas.width = this.width;
\t canvas.height = this.height;
\t var ctx = canvas.getContext("2d");
\t ctx.drawImage(this, 0, 0);
\t var dataURI = canvas.toDataURL("image/jpg");
\t
\t // convert base64/URLEncoded data component to raw binary data held in a string
\t var byteString;
\t if (dataURI.split(',')[0].indexOf('base64') >= 0)
\t \t byteString = atob(dataURI.split(',')[1]);
\t else
\t \t byteString = unescape(dataURI.split(',')[1]);
\t // separate out the mime component
\t var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
\t // write the bytes of the string to a typed array
\t var ia = new Uint8Array(byteString.length);
\t for (var i = 0; i < byteString.length; i++) {
\t \t ia[i] = byteString.charCodeAt(i);
\t }
\t return callback(new Blob([ia], { type: mimeString }));
}
img.src = url;
}
getImageFormUrl('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg/628px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg', function (blobImage) {
\t var formData = new FormData();
\t formData.append('key1', 'value1');
\t formData.append('key2', 'value2');
\t formData.append('key2', 'value3');
\t formData.append('imageToUpload', blobImage);
\t
\t console.log(blobImage);
\t //use formData in "data" property in $.ajax
\t //$.ajax({
\t \t //blabla: blabla,
\t \t //data: formData,
\t \t //blabla: blabla
\t //}})
});
텍스트 입력 필드를 활성화 또는 입력 필드를 제출할 때? 그럼 그냥 서버에 이미지 URL을 보내야합니까? –
URL을 붙여 넣기위한 텍스트 입력입니다. PHP로 보내면 이미지 내용을 얻을 수 있습니다. [this Q/A] (http://stackoverflow.com/questions/909374/copy-image-from-remote-server-over-http)를 확인하십시오. – skobaljic