Convert image from url to Base64
HTML
<img id="imageid" src="https://www.google.de/images/srpr/logo11w.png">
JavaScript
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
var base64 = getBase64Image(document.getElementById("imageid"));
This method requires the canvas element, which is perfectly supported.
- The MDN reference of
HTMLCanvasElement.toDataURL()
. - And the official W3C documentation.
Converting an Image url to base64 in Angular
You can use this to get base64 image
async function getBase64ImageFromUrl(imageUrl) {
var res = await fetch(imageUrl);
var blob = await res.blob();
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.addEventListener("load", function () {
resolve(reader.result);
}, false);
reader.onerror = () => {
return reject(this);
};
reader.readAsDataURL(blob);
})
}
Then call it like this
getBase64ImageFromUrl('your url')
.then(result => testImage.src = result)
.catch(err => console.error(err));
Way to convert image straight from URL to base64 without saving as a file in Python
Using the requests library:
import base64
import requests
def get_as_base64(url):
return base64.b64encode(requests.get(url).content)
PHP: How to convert an image from URL to Base64?
Do you want to create a data url? You need a MIME-Type and some other additional information then (see Wikipedia). If this is not the case, this would be a simple base64 representation of the image:
$b64image = base64_encode(file_get_contents('path/to/image.png'));
Relevant docs: base64_encode()
-function, file_get_contents()
-function.
Fetch image from URL and convert it to base64 string - Flutter
Finally I found the solution using http package
import 'package:http/http.dart' as http;
Future<String> networkImageToBase64(String imageUrl) async {
http.Response response = await http.get(imageUrl);
final bytes = response?.bodyBytes;
return (bytes != null ? base64Encode(bytes) : null);
}
Example:
final imgBase64Str = await networkImageToBase64('IMAGE_URL');
print(imgBase64Str);
This is working perfectly for both mobile and web.
Javascript Convert an URL to a BASE64 Image
Image instance fires onload
event when the image is fully loaded. With this, another issue comes in which is dealing asynchronous functions. To be able to use what getBase64Image
uses, a callback function must be used. Without a callback function, the function returns undefined
let base64image = this.getBase64Image(imgUrl);
console.log(base64image); // undefined
Adjusted function
public getBase64Image(imgUrl, callback) {
var img = new Image();
// onload fires when the image is fully loadded, and has width and height
img.onload = function(){
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png"),
dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
callback(dataURL); // the base64 string
};
// set attributes and src
img.setAttribute('crossOrigin', 'anonymous'); //
img.src = imgUrl;
}
Usage:
this.getBase64Image(imgUrl, function(base64image){
console.log(base64image);
});
Related Topics
Onclick JavaScript to Make Browser Go Back to Previous Page
How to Bind on Click Event on Dynamically Created Button in Angular 6
Input Field Value Should Not Be Greater Than Other Field Value
How to Change Text Value Upon Button Press in React Native
Allow Negative/Positive Numbers But Not Letters
How to Prevent Ajax Requests to Follow Redirects Using Jquery
Save State When Refresh Page - Reactjs
Angular 4: How to Read Content of Text File With Httpclient
How to Set Image to Fit Width of the Page Using Jspdf
How to Replace Double/Multiple Slash to Single in Url
How to Show Roles of User Discord.Js/Userinfo Command
How to Find Object in a List of Items by Index Using Es6 (Reactjs)
How to Disable Onclick Without Altering Its Function
How to Redirect Drop Down Menu When Option Is Selected
Prevent a White Space in the Beginning of a Input
React - How to Add Dynamic Key/Value Pair to an Object