I have a dout, how can i aceess this Object data and retreive the image in base64.
I noticed that it returns a string himself
const data = {
image:"{\"base64\":\"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\r\n\"}",
}
if i do console.log(data.image) it returns the string itself but i want base64 string only
(you'll have to ask the backend dev to remove the \n\r in the end, or remove it yourself ) use JSON.parse to parse the data.image and get the base64 key :
const data = {
image:"{\"base64\":\"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\"}",
}
const str = JSON.parse(data.image).base64
console.log(str);
Before your backend guys fixes the JSON encoding you could
const data = {
image:"{\"base64\":\"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\r\n\"}",
}
const b64_retrieved = /([\/+\da-zA-Z]+={0,2}){7}/.exec(data.image)[0];
const mime_prefixed = b64 => `data:image/${{'i':'png','/':'jpeg','R':'gif','U':'webp'}[b64[0]]};base64,${b64}`;
const img = new Image();
img.src = mime_prefixed(b64_retrieved);
document.documentElement.appendChild(img);
after the backend guys fix their issue you could:
const data = {
"image": {
"base64": "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"
},
}
const mime_prefixed = b64 => `data:image/${{'i':'png','/':'jpeg','R':'gif','U':'webp'}[b64[0]]};base64,${b64}`;
const img = new Image();
img.src = mime_prefixed(data.image.base64);
document.documentElement.appendChild(img);
also, ask if they could pass you in the object like:
const data = {
"image" : "data:image/gif;base64,R0lGODlhZA... ...iESEAA7",
}
that would spare you the smart-guessing the MIME type etc...
const data = {
"image": "data:image/gif;base64,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",
};
const img = new Image();
img.src = data.image;
document.documentElement.appendChild(img);
Related
Project:
Loading screen with Base64 image in Playcanvas (WebGL)
What I try to do:
Change the image when the Website is loaded with other language (index.html?language=xy)
What I already have:
I get the default image in my WebGL loading javascript.
var logo = document.createElement('img');
logo.src = 'here is my base64 code';
splash.appendChild(logo);
logo.onload = function() {
splash.style.display = 'block';
};
I thought it would be the best option to list all languages in an object, and invoke the object with the language that is currently selected.
Why I can't figure it out myself:
As I just started creating javascript projects, I need to lookup many thing, but when I search up my issue I get stuff like this Base64 encode a javascript object
Define all the images in an object
const images = {
'us': 'data:image/jpeg;base64,...',
'nl': 'data:image/jpeg;base64,...',
'fallback': 'data:image/jpeg;base64,...'
}
Parse the query paramters, use a fallback if not given
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
let lanuageKey = params['language'];
if (!images[lanuageKey]) {
lanuageKey = 'fallback';
}
Add the image with desired base64
var logo = document.createElement('img');
logo.src = images[lanuageKey];
document.body.appendChild(logo);
Putting this all together, will give something like the following snippet:
Note 1: Stack Snippets can't read the query params, so you'll need to try this locally
Note 2: Due to the 30k max chars, I had to remove the base64's
const images = {
'us': 'data:image/jpeg;base64...',
'nl': 'data:image/jpeg;base64...',
'fallback': 'data:image/jpeg;base64...'
}
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
let lanuageKey = params['language'];
if (!images[lanuageKey]) {
lanuageKey = 'fallback';
}
var logo = document.createElement('img');
logo.src = images[lanuageKey];
document.body.appendChild(logo);
I did not found answer. The same problem is How to convert file to base64 in JavaScript?.
previewPhoto (photo, id) {
const preview = document.getElementById(id)
const reader = new FileReader()
reader.onloadend = function () {
preview.src = reader.result
}
reader.readAsDataURL(photo)
},
There I just replace the src value in element by querySelector. But in may case I need something like this:
previewPhoto (photo) {
const readyToSrcImg = fileToImg(photo)
return readyToSrcImg
},
Does anyone know about this case?
Don't use the FileReader to preview a image as base64 - it waste time to encode/decode and uses more memory - meaning: it's slower.
Use URL.createObjectURL(file) to create a references link to the raw binary instead
previewPhoto (photo, id) {
const preview = document.getElementById(id)
preview.src = URL.createObjectURL(photo)
},
I am resizing base64 image with jimp:
const buffer = Buffer.from(Photo, 'base64');
const { mime } = fileType(buffer);
const photoBuffer = await jimp.read(buffer);
const res = await photoBuffer.cover(10, 10)
.quality(30).getBufferAsync(mime);
now I need to conver 'res' buffer back to base64.
Just use toString method of Buffer like this:
const resInBase64 = res.toString('base64')
I've got a Javascript native Blob of a jpeg and I'd like to store it as a firestore blob.
But of course Firestore says "FirebaseError: Function DocumentReference.update() called with invalid data. Unsupported field value: a custom Blob object (found in field image in document..."
Is there any way to convert from javascript-blob to firestore-blob?
canvas.toBlob(async (blob)=> {
console.info(`Converting to blob: ${blob.constructor.name} and storing to firestore...`);
await myselfRef.update({
image: blob
}, 'image/jpeg', 0.4));
To convert a JavaScript Blob to a Firestore Blob you have to follow the steps below:
Convert JavaScript Blob to ArrayBuffer using your_blob.arrayBuffer().
Wrap the ArrayBuffer you just got into a Uint8Array by passing it as the single parameter to the constructor.
Use the firebase.firestore.Blob.fromUint8Array(your_array) method to, finally, create the Firestore Blob.
If you want to perform the inverse transformation, from Firestore Blob to JavaScript Blob, you have to, pretty much, do the opposite:
Convert Firestore Blob to Uint8Array using firestore_blob.toUint8Array().
Create the JavaScript Blob using the constructor using the array. Keep in mind that you have to invoke it using a list of arrays, e.g., new Blob([my_array]).
Here is an example of this in practice. The function save() is used to, well, save the contents of the canvas to Firestore. And, the function load() loads them into the canvas again.
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const db = firebase.firestore();
function save() {
canvas.toBlob(async blob => {
const blob_url = URL.createObjectURL(blob);
const ref = db.collection('blob').doc('blob');
const array_buffer = await blob.arrayBuffer();
const uint8_array = new Uint8Array(array_buffer);
const firebase_blob = firebase.firestore.Blob.fromUint8Array(uint8_array);
ref.update({
image: firebase_blob,
});
});
}
async function load() {
const ref = db.collection('blob').doc('blob');
const doc = await ref.get();
const firebase_blob = doc.get('image');
const uint8_array = firebase_blob.toUint8Array();
const blob = new Blob([uint8_array]);
const blob_url = URL.createObjectURL(blob);
const image = new Image();
image.onload = () => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0);
URL.revokeObjectURL(blob_url);
}
image.src = blob_url;
}
I'm working on a personal project where I'm given a base64 string that is some image. I'm trying to run tesseract OCR on that image, however, I'm not sure how to do that.
var base64String = 'data:image/jpg;base64,' + givenImage;
var buffer = Buffer.from(base64String, 'base64');
var output = tesseract.recognize(buffer);
return output;
This doesn't seem to work at all and I'm not really sure why. This is run on a node.js server.
I think you're very nearly there. When parsing the base64 string, you just need to omit the 'data:image/jpg;base64,' prefix.
e.g.
var base64String = givenImage;
Here's a full example of recognizing text from an image encoded as a base64 string:
const { createWorker } = require ('tesseract.js');
let base64 = `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`;
let imageBuffer = Buffer.from(base64, "base64");
const worker = createWorker({
logger: m => console.log(m)
});
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
console.log("Recognizing...");
const { data: { text } } = await worker.recognize(imageBuffer);
console.log("Recognized text:", text);
await worker.terminate();
})();