It works if you use the url https://i.imgur.com/6gMn1RD.png. However, when passing the string via axios, i have a network problem with the string being to large. To manage this... I want to resize the image to 100px/100px. I have been at this for 2 days and cannot find a solution anywhere.
So the steps should be as follows:
Get base64 string from url (see snippet below).
In the snippet below, before calling this.setState, convert the base64 to a smaller size of 100px/100px
Finally, we can call set state with the resized base64 string.
I have the following code snippet
convertAndSetAvatarUrlToBase64 = () => {
const url = this.state.avatarUrl;
const setAvatar = (base64) => {
// Resize base64 here
this.setState({ avatar: base64, fileAvatarImage: '' });
}
let getDataUri = function (url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
let reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
let proxyUrl = 'https://cors-anywhere.herokuapp.com/';
xhr.open('GET', proxyUrl + url);
xhr.responseType = 'blob';
xhr.send();
};
getDataUri(url, function (base64) {
setAvatar(base64);
})
}
Note: I've tried using the library resize-base64, but all I get is a DrawImage error relating to the canvas (something my friend said doesn't work well with react).
Related
I have image URL like this - https://graph.facebook.com/3938027626271800/picture?type=normal.
I want to create a helper function in which I will pass the image URL as a parameter and it will return base 64 string. Right now I am following this approach but this approach converts the URL to base64 but it is not returning the base 64.
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataUrl('https://graph.facebook.com/3938027626271800/picture?type=normal', function(myBase64) {
console.log(myBase64); // myBase64 is the base64 string
});
What do you mean return base64 not base 64?
What's the expected output?
It seems your code works well, i wrote in another approach got same results as you did.
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);
})
}
getBase64ImageFromUrl('https://graph.facebook.com/3938027626271800/picture?type=normal')
.then(result => console.log(result))
.catch(err => console.error(err));
As images may contain sensitive data, it's not possible to read images loaded from a different domain unless they allow it with CORS by specifying header
Allow-Content-Allow-Origin: *
Your example works just fine because the facebook image provides this header but it will not work for all images from external domains.
Your second thought may be to try to draw an image into canvas and then get data back but luckily for user's safety this is also prohibited:
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
The only way is to create a proxy on your domain to download the image from external source, it can already convert it to base64 for you on the backend as well. This is secure because the image is no longer downloaded in the browser user context, will not use his private cookies and IP address and so will not contain any sensitive data.
In HTML file:
<input type="file" (change)="selectedImage($event)" accept="image/*" name="Image">
In TS file:
public async selectedImage(event) {
const reader = new FileReader();
if (event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = async () => {
reader.result // This is Image base64
};
}
}
Based on other posts here, I have written this to get the dimensions and size of a file
const newImg = new Image();
newImg.onload = () => {
console.log('height ' + newImg.height);
console.log('width ' + newImg.width);
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.google.com/myImage.png', true);
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function() {
if (this.readyState === this.DONE) {
console.log('size ' + this.response.byteLength);
}
};
xhr.send(null);
}
newImg.src = 'https://www.google.com/myImage.png';
While it works, I was wondering if I could combine both in one, meaning doing only either the Image onLoad or the xhr request ?
You can avoid a second network roundtrip by using a Blob and a data URI:
fetch('https://cdn.glitch.com/2eddb7d4-12e2-45ae-8d27-738f13fb514a%2FGOPR1017_1586689900523.JPG?v=1587457335788')
.then(r => r.arrayBuffer())
.then(buffer => {
console.log('Size: ' + buffer.byteLength)
const blob = new Blob([buffer], {type: 'image/jpeg'})
const img = new Image()
img.src = URL.createObjectURL(blob)
img.onload = function() {
console.log(img.width, img.height)
}
})
Note that you still need the onload callback as the browser takes a bit of time to parse the image, but in this case it won't cause a network roundtrip.
I can't answer your question, but I can give you another useful info:
Image is a weird animal, it behaves differently depending on the browser, the context and the pixel density. To be sure to catch the natural dimensions of your image, use:
newImg.naturalHeight;
newImg.naturalWidth;
instead of newImg.width or newImg.clientWidth.
More info here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight
Have fun!
I have Blob, which stored in db and i take it from database with java server like this:
Entity.java
#Column(name = "img")
private Blob img;
public Blob getImg() {
return img;
}
public void setImg(Blob img) {
this.img = img;
}
Repository.java
#Transactional
#Query(value = "SELECT img FROM articles WHERE category = ?", nativeQuery = true)
//Blob findP(String category);
Blob findPic(String category);
Controller.java
#RequestMapping(value="/Pic_test")
#ResponseBody
public Blob getPics() throws SQLException, IOException {
return remindRepository.findPic("Java");
}
Then I receive it with Javascript to image it:
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL('http://localhost:8080/articles/Pic_test', function(dataUrl) {
var display = document.getElementById('display');
var url = window.URL.createObjectURL(new Blob([dataUrl]));
var img = new Image();
img.src = url;
document.getElementById("demo").innerHTML = img.src;
})
However, if I call my "img" Blob in java code, i have an error in server, but if I call it byte[], my picture is not shown just.
I can't comment the java part since I know nothing about it, but for the javascript one, what you do is... not correct.
You don't seem to understand what is a data URL, nor what you are doing here.
So a data URL is a string, made of an header and of some file content (data:|mime/type;|file-content).
A data URL is an URL that points to itself, useful to embed data that should normally be served from network.
Quite often, the file content part is encoded as base64, because the URI scheme is limited in its set of allowed characters, and that binary data couldn't be represented in this scheme.
Now let's see what you are doing here...
You are downloading a resource as a Blob. That's good, Blob are perfect objects to deal with binary data.
Then, you read this Blob a data URL. Less good, but I can see the logic, <img> can indeed load images from data URLs.
But then from this data URL string, you create a new Blob! This is completely wrong. The Blob you just created with new Blob([dataUrl]) is a text file, not your image file in any way. So yes, the data is still hidden somewhere in the base64 data which is itself in the data URL, but what your poor <img> will see when accessing the data hooked by the Blob URI is really just text, data:image/png;base64,iVBORw0... and not at all �PNG... like its parsing algo can read.
So the solution is quite easy: get rid of the FileReader step. You don't need it.
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
xhr.responseType = 'blob';
xhr.onload = display;
xhr.send();
function display(evt) {
// we did set xhr.responseType = "blob"
var blob = evt.target.response; // so this is a Blob
// hence, no need for anything else than
var url = URL.createObjectURL(blob);
var img = new Image();
img.src = url;
document.body.appendChild(img);
}
And if I may, all your thing could also just be
document.getElementById('display').src = 'http://localhost:8080/articles/Pic_test';
I have a object like this
{
id: "114898379136253"
leadgen_export_csv_url: "https://www.facebook.com/ads/lead_gen/export_csv/?id=379136253&type=form&source_type=graph_api",
locale: "en_US"
name: "Untitled form 11/7/2017"
status: "ACTIVE"
}
I want get the file content, to fill my database with the leads that come from this file.
In my case, I need to treat the CORS also, because is a external URL, but I need some help in this solution, transform in a buffer and read the buffer? Or exist some better solution ?
function loadFile(file) {
var xhr = new XMLHttpRequest();
xhr.open('GET', file, true);
xhr.withCredentials = false;
xhr.responseType = 'blob';
xhr.onload = function (e) {
var reader = new FileReader();
reader.readAsDataURL(this.response);
reader.onload = function (e) {
console.log('DataURL:', e.target.result);
};
};
xhr.send();
}
The DataURL: in console log, return a Base64, and decoding the Base64 result, it returns me a webpage, but not the file.
Reference: FileReader.readAsDataURL
Considering the following example:
function previewFile(file) {
var reader = new FileReader();
reader.onloadend = function () {
console.log(reader.result);
}
reader.readAsDataURL(file);
}
It states:
instanceOfFileReader.readAsDataURL(blob);
blob: The Blob or File from which to read.
How can a local file URL like: 'file:///C:/path-to/root.png' be
passed to the readAsDataURL()
Is FileReader() available in a Firefox Addon?
To convert a URL to a Blob for FileReader.readAsDataURL() do this:
var request = new XMLHttpRequest();
request.open('GET', MY_URL, true);
request.responseType = 'blob';
request.onload = function() {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function(e){
console.log('DataURL:', e.target.result);
};
};
request.send();
Expanding on Felix Turner s response, here is how I would use this approach with the fetch API.
async function createFile(){
let response = await fetch('http://127.0.0.1:8080/test.jpg');
let data = await response.blob();
let metadata = {
type: 'image/jpeg'
};
let file = new File([data], "test.jpg", metadata);
// ... do something with the file or return it
}
createFile();
The suggested edit queue is full for #tibor-udvari's excellent fetch answer, so I'll post my suggested edits as a new answer.
This function gets the content type from the header if returned, otherwise falls back on a settable default type.
async function getFileFromUrl(url, name, defaultType = 'image/jpeg'){
const response = await fetch(url);
const data = await response.blob();
return new File([data], name, {
type: data.type || defaultType,
});
}
// `await` can only be used in an async body, but showing it here for simplicity.
const file = await getFileFromUrl('https://example.com/image.jpg', 'example.jpg');
Try this I learned this from #nmaier when I was mucking around with converting to ico:
Well i dont really understand what array buffer is but it does what we need:
function previewFile(file) {
var reader = new FileReader();
reader.onloadend = function () {
console.log(reader.result); //this is an ArrayBuffer
}
reader.readAsArrayBuffer(file);
}
notice how i just changed your readAsDataURL to readAsArrayBuffer.
Here is the example #nmaier gave me:
https://stackoverflow.com/a/24253997/1828637
it has a fiddle
if you want to take this and make a file out of it i would think you would use file-output-stream in the onloadend
This information is outdated as of now, but cannot be deleted.
You can create File instances just by specifying a path when your code is chrome-privileged:
new File("/path/to/file");
File is a sub-class of Blob, so all File instances are also valid Blobs.
Please note that this requires a platform path, and not a file URL.
Yes, FileReader is available to addons.
File and FileReader are available in all windows. If you want to use them in a non-window scope (like bootstrap.js or a code module), you may use nsIDOMFile/nsIDOMFileReader.
Here is my code using async awaits and promises
const getBlobFromUrl = (myImageUrl) => {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.open('GET', myImageUrl, true);
request.responseType = 'blob';
request.onload = () => {
resolve(request.response);
};
request.onerror = reject;
request.send();
})
}
const getDataFromBlob = (myBlob) => {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(myBlob);
})
}
const convertUrlToImageData = async (myImageUrl) => {
try {
let myBlob = await getBlobFromUrl(myImageUrl);
console.log(myBlob)
let myImageData = await getDataFromBlob(myBlob);
console.log(myImageData)
return myImageData;
} catch (err) {
console.log(err);
return null;
}
}
export default convertUrlToImageData;
I know this is an expansion off of #tibor-udvari's answer, but for a nicer copy and paste.
async function createFile(url, type){
if (typeof window === 'undefined') return // make sure we are in the browser
const response = await fetch(url)
const data = await response.blob()
const metadata = {
type: type || 'video/quicktime'
}
return new File([data], url, metadata)
}
I ended up wanting something similar to this but without having to pass the type for the file or the filename, so I made my own example based on #Felix Turner's example. I used the content-disposition header for the filename first in case the file is coming back from an API endpoint, but use the last part of the URL path if that header doesn't exist.
function getFilenameFromContentDisposition(res) {
let filename = null;
const disposition = res.headers.get("content-disposition");
if (disposition?.includes("attachment")) {
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
const matches = filenameRegex.exec(disposition);
if (matches?.[1]) {
filename = matches[1].replace(/['"]/g, "");
// Sometimes the filename comes in a URI encoded format so decode it
filename = decodeURIComponent(filename);
// Sometimes the filename starts with UTF-8, remove that
filename = filename.replace(/^UTF-8/i, "").trim();
}
}
return filename;
}
async function getFileFromLink(url) {
const fileRes = await fetch(url);
const blob = await fileRes.blob();
let fileName = getFilenameFromContentDisposition(fileRes);
if (!fileName) {
fileName = url.split("/").pop();
}
const file = new File([blob], fileName, {
type: blob.type,
});
return file;
}
If you wanted to make this better, I'd use the content-disposition package on npm for the parsing as the formatting of it can get strange. I'd also probably use the mime package for ensuring that the filename from the URL has a proper file extension based on the returned content-type
Here's a simplest way to get blob or file object with vanila.js and promise
const fileURL_to_blob = (file_url) => {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.open('GET', file_url, true);
request.responseType = 'blob';
request.onload = function() {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function(e){
//console.log('DataURL:', e.target.result);
resolve(e.target.result);
};
};
request.onerror=function(e){
reject(e);
}
request.send();
});
}