1.You can use the base64 string, prefix it with "data:image/png;base64," like so.
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" />
2.You could have a nodejs server, convert the base64 to a buffer/binary and return it back. You cannot return it as a blob.
app.post('/upload-image', async (req, res) => {
const { base64, filename } = req.body;
if (!base64) return res.status(400).json({ error: 'Missing base64 field' });
try {
const cleanedBase64 = cleanBase64(base64);
// Cloudinary expects a data URL string
const dataUrl = `data:image/png;base64,${cleanedBase64}`;
const uploadOptions = {};
if (filename)
uploadOptions.public_id = filename.replace(/[^a-z0-9-_]/gi, '_');
const result = await cloudinary.uploader.upload(dataUrl, uploadOptions);
res.json({ url: result.secure_url });
} catch (e) {
});}
});
-
Another approach is upload the dataurl with the prefix data:image/png;base64 to an api, for eg: cloudinary api.
-
One more option is to decode the base64, an return as Response with mimetype, see the python sample code.
try:
# Decode the base64 string
image_bytes = base64.b64decode(base64_str)
# Try to detect image type (png, jpeg, gif, etc.)
img_type = imghdr.what(None, h=image_bytes) or "png"
mime_type = f"image/{img_type}"
# Return the image blob with proper headers
return Response(image_bytes, mimetype=mime_type)
except Exception as e:
return jsonify({"error": f"Invalid base64 data: {str(e)}"}), 400
5. There are so many options on the HTML and Javascript to manipulate base64 to display it as an image.