Package Exports

webpfy
webpfy/dist/webpfy.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpfy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

webpfy

webpfy is a utility for converting images to the WebP format. It provides a simple and efficient way to convert images in various formats (e.g., JPEG, PNG) to the modern and highly efficient WebP format, reducing image file sizes without compromising quality.

Installation

To use webpfy in your project, you can install it via npm:

npm install webpfy
# or
yarn add webpfy

Usage

To convert an image to WebP format using webpfy, you can import the function and use it as follows:

import webpfy from 'webpfy';

// Specify the image you want to convert (e.g., a File or Blob)
const image = /* Provide your image here */;

// Optionally, specify the quality (default is 75)
const quality = 75;

// Create options object
const options = {
    image,
    quality
};

// Use webpfy to convert the image
webpfy(options)
    .then(result => {
        // Handle the result
        console.log(`WebP Blob: ${result.webpBlob}`);
        console.log(`WebP File Name: ${result.fileName}`);
        // Save or use the WebP Blob or file name as needed
    })
    .catch(error => {
        // Handle errors
        console.error(error);
    });

Options

image: The image to convert, which can be a File or Blob object representing the image file.

quality (optional): The quality of the WebP image, ranging from 0 to 100 (default is 75). Higher values result in higher quality but larger file sizes.

Return Types

webpBlob: The converted image as a Blob object in WebP format.

fileName: The suggested file name for the converted WebP image.

Examples

Here's a complete example of how to use webpfy in a React component,

import React, { useState } from "react";
import webpfy from "webpfy";

function ImageConverter() {
    const [webpBlob, setWebpBlob] = useState(null);
    const [fileName, setFileName] = useState("");

    const handleFileChange = (event) => {
        const imageFile = event.target.files[0];

        if (imageFile) {
            webpfy({ image: imageFile })
                .then((result) => {
                    const { webpBlob, fileName } = result;
                    setWebpBlob(webpBlob);
                    setFileName(fileName);
                })
                .catch((error) => {
                    console.error("Image conversion error:", error);
                });
        }
    };

    return (
        <div>
            <input type="file" accept="image/*" onChange={handleFileChange} />
            {webpBlob && (
                <div>
                    <h3>Converted WebP Image:</h3>
                    <img src={URL.createObjectURL(webpBlob)} alt={fileName} />
                    <a href={URL.createObjectURL(webpBlob)} download={fileName}>
                        Download WebP Image
                    </a>
                </div>
            )}
        </div>
    );
}

export default ImageConverter;

Here's an example of converting an image and making API calls,

import webpfy from "webpfy";

// Specify the image file to be converted (replace with your file input)
const fileInput = document.getElementById("fileInput"); // Replace 'fileInput' with your HTML input ID
const imageFile = fileInput.files[0];

// Optionally, specify the quality (default is 75)
const quality = 75;

// Create options object for image conversion
const options = {
    image: imageFile,
    quality,
};

// Use webpfy to convert the image
webpfy(options)
    .then(async (result) => {
        // Create a FormData object
        const formData = new FormData();

        // Append the converted WebP image to the FormData object
        formData.append(
            "your-image-field-name-here",
            result.webpBlob,
            result.fileName
        );

        try {
            // Make an API call using fetch to upload the converted WebP image
            const response = await fetch("https://example.com/api/upload", {
                method: "POST",
                body: formData,
            });

            if (response.ok) {
                const responseData = await response.json();
                // Handle the API response
                console.log("Image uploaded successfully:", responseData);
            } else {
                // Handle API call errors
                console.error(
                    "API call failed:",
                    response.status,
                    response.statusText
                );
            }
        } catch (error) {
            // Handle network errors or other issues
            console.error("API call failed:", error);
        }
    })
    .catch((error) => {
        // Handle errors during image conversion
        console.error("Image conversion error:", error);
    });

License

This project is licensed under the MIT License - see the LICENSE file for details.

Feel free to customize the README file further to match your project's specific requirements and branding. This README provides a basic structure with documentation, usage instructions, and an example for using webpfy in a React application.