从URL读取图像并上传

我无法找到从URL读取图像并使用JavaScript / Ajax上传图像的正确方法。

假设有一个URL： http://sofzh.miximages.com/javascript/parisjs_transparent.png ： http://sofzh.miximages.com/javascript/parisjs_transparent.png 。

我现在应该能够上传它，但我想首先上传我需要下载它，那么程序是什么？

Answer 1

如果远程服务器允许CORS请求，则可以下载远程映像并读取其内容。 如果远程服务器不允许CORS，则可以显示图像（使用标准的标记），但无法读取内容 – canvas受到污染 。

启用CORS时，使用JavaScript从远程URL下载映像

 function getImageFormUrl(url, callback) { var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.onload = function (a) { var canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0); var dataURI = canvas.toDataURL("image/jpg"); // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } 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) { var formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); formData.append('key2', 'value3'); formData.append('imageToUpload', blobImage); console.log(blobImage); //use formData in "data" property in $.ajax //$.ajax({ //blabla: blabla, //data: formData, //blabla: blabla //}}) }); 

Answer 2

让服务器下载/上传您的图像。 您需要做的是为图像URL创建文本输入字段。 比通过AJAX，你只发送到后端的URL，服务器获取其内容。

Answer 3

@DheerajAgrawal

看到这个例子： http ： //jsfiddle.net/WQXXT/3004/

你应该定制它，它说：

 alert('start upload script here');