Let say I have an image tag in my page:
<img src="https://i.picsum.photos/id/949/200/300.jpg" alt="foo" />
How to download that image and convert File object or binary file in vanilla JavaScript without having CORS issue?
you can convert to base64 or using blob
jQuery.ajax({
url: 'https://i.picsum.photos/id/949/200/300.jpg',
xhrFields:{
responseType: 'blob'
},
success: function(data){
var blobData = data;
var url = window.URL || window.webkitURL;
var src = url.createObjectURL(data);
$('#img').attr("src", src);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<img id='img'>
</body>
Please try this code to convert the image source path to file object:
function getDataUri(url, callback)
{
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
canvas.getContext('2d').drawImage(this, 0, 0);
callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
callback(canvas.toDataURL('image/png'));
};
image.src = url;
}
getDataUri('/logo.png', function(dataUri) {
});
I hope the above code will be useful for you.
I think the answer to your question is here.
Read /Process image through javascript by passing its URL - Similar to file_get_contents in PHP?
