I am not able to find a proper way to read an image from a URL and upload it using JavaScript/Ajax.

Suppose there is a URL: .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?

I am not able to find a proper way to read an image from a URL and upload it using JavaScript/Ajax.

Suppose there is a URL: https://pbs.twimg./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?

• javascript
• jquery

3 Answers 3

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.

Download image from remote URL using JavaScript when CORS is enabled

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

Let server download/upload your image. What you need to do is to create a text input field for image URL. Than via AJAX you send to backend the URL only and server gets its contents.

@DheerajAgrawal

see this example: http://jsfiddle/WQXXT/3004/

you should customize that, where it says:

alert('start upload script here');