從URL上傳圖片並上傳

Question

我無法找到從URL中讀取圖片並使用JavaScript/Ajax上傳圖片的正確方法。

假設有一個URL：https://pbs.twimg.com/profile_images/1580483969/parisjs_transparent.png。

我現在應該可以上傳它了，但是我想首先上傳我需要下載它，那麼程序是什麼？

Answer 1

讓服務器下載/上傳您的圖片。你需要做的是爲圖片URL創建一個文本輸入框。比通過AJAX發送到後端的URL只有服務器獲取其內容。

Answer 2

@DheerajAgrawal

看看這個例子： http://jsfiddle.net/WQXXT/3004/

你應該自定義，在那裏說：

alert('start upload script here'); 

Answer 3

如果遠程服務器允許CORS請求時，它可以下載一個遠程圖像並閱讀其內容。如果遠程服務器不允許CORS，則可以顯示圖像（使用標準<img src="..">標籤），但不能讀取內容 - canvas gets tainted。從使用JavaScript遠程URL

下載圖像時CORS啓用

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 //}}) 
 
});