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')
Related
I have a example sound url here: http://awexsoft.rf.gd/testing/test.mp3 and i want to make a base64 from this url. Is there anyway to do this?
const res = await fetch('http://awexsoft.rf.gd/testing/test.mp3');
const data = await res.arrayBuffer();
const b64 = btoa(String.fromCharCode(...new Uint8Array(data)));
console.log(b64);
I am attempting to fetch encrypted raw buffer data (AES-256) from Arweave, pass to a decrypt function and use this to display an image. I am trying to fetch and decrypt the ArrayBuffer on the front end (in my React app).
First, I am encrypting the Buffer data in NodeJS and storing the file. Here is the code for it:
/**********************
** Runs in NodeJS **
**********************/
const encrypt = (dataBuffer, key) => {
// Create an initialization vector
const iv = crypto.randomBytes(IV_LENGTH);
// Create cipherKey
const cipherKey = Buffer.from(key);
// Create cipher
const cipher = crypto.createCipheriv(ALGORITHM, cipherKey, iv);
const encryptedBuffer = Buffer.concat([
cipher.update(dataBuffer),
cipher.final(),
]);
const authTag = cipher.getAuthTag();
let bufferLength = Buffer.alloc(1);
bufferLength.writeUInt8(iv.length, 0);
return Buffer.concat([bufferLength, iv, authTag, encryptedBuffer]);
};
const encryptedData = encrypt(data, key)
fs.writeFile("encrypted_data.enc", encryptedData, (err) => {
if(err){
return console.log(err)
}
});
Next, I try to fetch and decrypt on the front-end. What I have so far returns an ArrayBuffer from the response. I try to pass this ArrayBuffer to the decrypt function. Here is the code:
/***********************
** Runs in React **
***********************/
import crypto from "crypto"
const getData = async (key) => {
const result = await (await fetch('https://arweave.net/u_RwmA8gP0DIEeTBo3pOQTJ20LH2UEtT6LWjpLidOx0/encrypted_data.enc')).arrayBuffer()
const decryptedBuffer = decrypt(result, key)
console.log(decryptedBuffer)
}
// Here is the decrypt function I am passing the ArrayBuffer to:
export const decrypt = (dataBuffer, key) => {
// Create cipherKey
const cipherKey = Buffer.from(key);
// Get iv and its size
const ivSize = dataBuffer.readUInt8(0);
const iv = dataBuffer.slice(1, ivSize + 1);
// Get authTag - is default 16 bytes in AES-GCM
const authTag = dataBuffer.slice(ivSize + 1, ivSize + 17);
// Create decipher
const decipher = crypto.createDecipheriv("aes-256-gcm", cipherKey, iv);
decipher.setAuthTag(authTag);
return Buffer.concat([
decipher.update(dataBuffer.slice(ivSize + 17)),
decipher.final(),
]);
};
When I pass the ArrayBuffer data to the decrypt function, I get this error:
Unhandled Rejection (TypeError): First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.
You're omitting a lot of details that would help the community understand how you're encrypting the image, how you're retrieving it, and how you're decrypting it. Here's a full example of fetching an image, encrypting it, decrypting it, and displaying it in the browser. This runs in Chrome v96 and Firefox v95.
(async () => {
const encryptionAlgoName = 'AES-GCM'
const encryptionAlgo = {
name: encryptionAlgoName,
iv: window.crypto.getRandomValues(new Uint8Array(12)) // 96-bit
}
// create a 256-bit AES encryption key
const encryptionKey = await crypto.subtle.importKey(
'raw',
new Uint32Array([1,2,3,4,5,6,7,8]),
{ name: encryptionAlgoName },
true,
["encrypt", "decrypt"],
)
// fetch a JPEG image
const imgBufferOrig = await (await fetch('https://fetch-progress.anthum.com/images/sunrise-baseline.jpg')).arrayBuffer()
// encrypt the image
const imgBufferEncrypted = await crypto.subtle.encrypt(
encryptionAlgo,
encryptionKey,
imgBufferOrig
)
// decrypt recently-encrypted image
const imgBufferDecrypted = await crypto.subtle.decrypt(
encryptionAlgo,
encryptionKey,
imgBufferEncrypted
)
// display unencrypted image
const img = document.createElement('img')
img.style.maxWidth = '100%'
img.src = URL.createObjectURL(
new Blob([ imgBufferDecrypted ])
)
document.body.append(img)
})()
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();
})();
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);
I'm trying to read an image from client side encoded in base64.
How to read with nodejs?
My code:
// add to buffer base64 image
var encondedImage = new Buffer(image.name, 'base64');
fs.readFile(encondedImage, "base64", function(err, buffer){
if ( err ) {
console.log('In read file')
console.log(err)
} else {
// check err
lwip.open(buffer, 'jpg', function(err, image){
console.log('in open')
if ( err ) console.log(err)
if ( image ) console.log(image)
// check 'err'. use 'image'.
// image.resize(...), etc.
});
}
})
But, I got this error:
In read file
[Error: Path must be a string without null bytes.]
Latest and greatest way to do this:
Node supports file and buffer operations with the base64 encoding:
const fs = require('fs');
const contents = fs.readFileSync('/path/to/file.jpg', {encoding: 'base64'});
Or using the new promises API:
const fs = require('fs').promises;
const contents = await fs.readFile('/path/to/file.jpg', {encoding: 'base64'});
I think that the following example demonstrates what you need:
I removed the link because it was broken.
The essence of the article is this code part:
var fs = require('fs');
// function to encode file data to base64 encoded string
function base64_encode(file) {
// read binary data
var bitmap = fs.readFileSync(file);
// convert binary data to base64 encoded string
return new Buffer(bitmap).toString('base64');
}
// function to create file from base64 encoded string
function base64_decode(base64str, file) {
// create buffer object from base64 encoded string, it is important to tell the constructor that the string is base64 encoded
var bitmap = new Buffer(base64str, 'base64');
// write buffer to file
fs.writeFileSync(file, bitmap);
console.log('******** File created from base64 encoded string ********');
}
// convert image to base64 encoded string
var base64str = base64_encode('kitten.jpg');
console.log(base64str);
// convert base64 string back to image
base64_decode(base64str, 'copy.jpg');
var fs = require('fs');
function base64Encode(file) {
var body = fs.readFileSync(file);
return body.toString('base64');
}
var base64String = base64Encode('test.jpg');
console.log(base64String);
The following code reads a text file. Then converts it to text, then reads it as base64 and puts that into a binary buffer, and saves it back to a true binary.
import { readFileSync, writeFileSync } from 'fs'
import { tmpdir } from 'os'
const contents = readFileSync('./temp.txt')
const buffedInput = Buffer.from(contents.toString(), 'base64')
writeFileSync(`${tmpdir}/temp.zip`, buffedInput)