I am currently rendering innerHtml to blob in my Angular controller like this:
var blob = new Blob([document.getElementById('exportable').innerHTML]);
What I need to know is if there is a way to convert the resulting Blob to a base64 jpeg?
I tried this:
var reader = new window.FileReader();
reader.readAsDataURL(blob);
var base64data = reader.result;
base64data = base64data.replace('data:;base64,', 'data:image/png;base64,/9j/')
but when I tried to use the result (base64data) I received an error in my Angular controller "Invalid JPEG".
ANY assistance is greatly appreciated!
Related
I have been trying to convert an image file from my local machine but it seems not working for me.
I don't want to upload the image using an input because I'm only having the image path in production and i want to store the base64 string. but if there is a better way i can handle this then i don't mind
const reader = new FileReader();
const file = new File([imgUrl], { type: "image/png" });
console.log(file);
reader.addEventListener("load", function (e) {
console.log(e.currentTarget.result);
}, false);
const data = reader.readAsDataURL(file);
return data;
}
const img = "localhost:8080/start app abnner.png"; // my image path
getDataUrl(img);
The key is to use the result property of your object (see FileReader API.)
const reader = new FileReader()
reader.readAsDataURL(image) // assuming "image" is your file
reader.result // here is your base64 string
So in your case, it should be:
const data = reader.readAsDataURL(file);
return data.result;
I had to do something like this once, so I made a little plugin if you want: encode-image-uri. It has the advantage of using promises, so you’re 100% sure that you’re calling any function only when the conversion is done and your data is ready.
I'm trying to get the base64 content from a local audio on my device using javascript.
I'm using the following code:
var file = new File(["file_name.mp4"], "/data/user/files/VoiceRecordingPluginData/file_name.mp4");
var reader = new FileReader();
// Read file content on file loaded event
reader.onloadend = function (event) {
console.log(reader.result);
};
// Convert data to base64
reader.readAsDataURL(file);
As result, "file" gets populated like this:
file.name: ["file_name.mp4"]
file.localURL: "/data/user/files/VoiceRecordingPluginData/file_name.mp4"
Once "onloaded" is reached, "reader.result" is empty.
Any hints on what's wrong in my code?
I need to use PDF.js local, without a webserver. Just need to display a PDF which is in the same directory. Found this link here and also read in the FAQ that you can pass a Uint8 Array to PDF.js. I'm using filereader() to read the file. But I'm getting "Invalid PDF structure" error message. The PDF is ok - I've uploaded the whole thing to a webserver for testing. When opening the PDF with viewer.html online its working. What am I missing?
This is my code so far:
var file = new File(["compressed.tracemonkey-pldi-09.pdf"], "compressed.tracemonkey-pldi-09.pdf", {type: 'application/pdf'});
var fileReader = new FileReader();
fileReader.onload = function() {
var typedarray = new Uint8Array(fileReader.result);
pdfjsLib.getDocument(typedarray).then(function(pdf) {
//do something
});
};
fileReader.readAsArrayBuffer(file);
I am trying to display image while editing imformation but could not do it. I am getting below response from server.
ÿØÿàJFIFÿÛC
%# , #&')*)-0-(0%()(ÿÛC
I want to convert this response into Base64 so that I can handle but dont know how to convert it.
Can anyone tell me how to do this?
I am trying to do this but does not work..
response => {
console.log('Media',response)
let base64Data: string;
let reader = new FileReader();
reader.readAsDataURL(response);
reader.onloadend = () => {
base64Data = reader.result;
this.previewURL = this.sanitizer.bypassSecurityTrustUrl(base64Data);
};
You seem to be doing the right thing in the code you posted. May be the data you are getting from the server is corrupted.
For assistance you can check the sample working fiddle here that I created for you.
You can replace the base64Data with your own data in the fiddle and try to verify it.
I have a blob variable which represents an audio file. When this code is executed, a valid data url string is logged into console, but it is very small and works only in chrome, the browser probably stores it somewhere. Is it possible to convert it into a data url string that contains all the audio data? Also, everything works properly on other machines.
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
base64data = reader.result;
console.log( base64data );
}
Thanks.