【问题标题】：Read image from URL & upload从 URL 读取图像并上传
【发布时间】：2017-01-28 07:10:43
【问题描述】：

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

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

我现在应该可以上传了，但我想先上传我需要下载它，那么程序是什么？

【问题讨论】：

【解决方案1】：

如果远程服务器允许 CORS 请求，则可以下载远程图像并读取其内容。如果远程服务器不允许 CORS，则可以显示图像（使用标准 <img src=".."> 标签），但无法读取内容 - canvas gets tainted。

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

【讨论】：

【解决方案2】：

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

【讨论】：

文本输入域还是文件输入域？那么我只需要将图片 url 发送到服务器对吗？
只是一个文本输入来粘贴网址。比你将它发送到 PHP 并在那里你得到图像内容。检查this Q/A。

【解决方案3】：

@DheerajAgrawal

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

你应该自定义它，它说：

alert('start upload script here');

【讨论】：