从URL&读取图像上载 [英] Read image from URL & upload
问题描述
我无法找到一种正确的方法来从URL读取图像并使用JavaScript / Ajax上传它。
I am not able to find a proper way to read an image from a URL and upload it using JavaScript/Ajax.
假设有一个URL: https://pbs.twimg.com/profile_images/1580483969/parisjs_transparent.png
。
我应该可以上传它现在,但我想首先上传我需要下载它,那么程序是什么?
I should be able to upload it now, but I guess to upload first I need to download it, so what will be the procedure?
推荐答案
如果远程服务器允许CORS请求,可以下载远程映像并读取其内容。如果远程服务器不允许CORS,则可以显示图像(使用标准< img src =..>
标记),但内容不能是阅读 - 画布受到污染。
If the remote server allows CORS requests, it possible to download a remote image and read its contents. If the remote server does not allow CORS, the image can be shown (using a standard <img src="..">
tag), but the content cannot be read - the canvas gets tainted.
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
//}})
});
这篇关于从URL&读取图像上载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!