A package for converting and compressing images to base64 format with quality control and size limits.
ISC License
Need to upload images to your web application but hate the hassle of dealing with complex URL structures or server-side image handling? Stop worrying about complicated workflows! bitpix is here to make your life easier. It converts any image to Base64 format, compresses it to ensure fast performance, and maintains quality — all with an easy-to-use function. No more worrying about image size or file types — bitpix has you covered.
Whether you're building a dynamic web app or a quick image uploader for a client, bitpix lets you focus on what matters by handling image conversion and compression in one streamlined package.
Check out the demo.
convertImageToBase64
At the heart of bitpix is its main function, convertImageToBase64
, which efficiently converts and compresses images to Base64, ensuring they are under the 5MB size limit. This function returns both the Base64 string and an error if the image exceeds the limit.
convertImageToBase64(file: File): Promise<{ base64: string | null, error: string | null }>
<img src="..." />
), sent to a server, or stored.Here’s how you can use bitpix in a simple React component to handle image uploads and display a Base64-encoded version of the image:
import React, { useState } from 'react';
import { convertImageToBase64 } from 'bitpix'; // Import the bitpix package
const ImageUploader = () => {
const [base64Image, setBase64Image] = useState(null);
const [error, setError] = useState(null);
const handleImageUpload = async (event) => {
const file = event.target.files[0];
if (file) {
const { base64, error } = await convertImageToBase64(file);
if (error) {
setError(error);
setBase64Image(null);
} else {
setBase64Image(base64);
setError(null);
}
}
};
return (
<div>
<h2>Upload an Image</h2>
<input type="file" onChange={handleImageUpload} accept="image/*" />
{error && <p style={{ color: 'red' }}>{error}</p>}
{base64Image && (
<div>
<h3>Base64 Encoded Image:</h3>
<img src={base64Image} alt="Uploaded" style={{ maxWidth: '100%' }} />
<textarea value={base64Image} readOnly rows="10" style={{ width: '100%' }} />
</div>
)}
</div>
);
};
export default ImageUploader;
convertImageToBase64
function.textarea
.bitpix is perfect for developers who want:
No more worrying about oversized image uploads or complex image handling — bitpix takes care of it all!
We welcome contributions from the open-source community! To contribute, follow these steps:
Start by forking the bitpix repository on GitHub.
git clone https://github.com/your-username/bitpix.git
Make a new branch for your feature or fix.
git checkout -b feature-name
Implement your changes and ensure your code is clean and well-structured.
Write meaningful commit messages and commit your changes.
git add .
git commit -m "Add new feature"
Push your changes to your forked repository.
git push origin feature-name
Submit a pull request to the original bitpix repository and explain your changes in detail.
We’ll review your changes and work together to improve bitpix!
bitpix is your go-to solution for image uploads in web applications. With its efficient compression, file size management, and simple API, bitpix takes the hassle out of image handling so you can focus on building better apps.