Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
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.
To use webpfy
in your project, you can install it via npm:
npm install webpfy
# or
yarn add webpfy
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);
});
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.
webpBlob
: The converted image as a Blob object in WebP format.
fileName
: The suggested file name for the converted WebP image.
The examples may not be clean code but they are just examples. You can use webpfy
in any way you want. All you need is to call the function with the right parameters. And you can use the returned values in any way you want.
Here's how I use webpfy
in my React project,
/* rest of the relevant code */
const handleFileUpload = async (e) => {
const file = e.target.files[0];
try {
const { webpBlob, fileName } = await webpfy({ image: file }); // keeping the quality default
// Pass the webpBlob and fileName to the parent component to make API calls
getImage(webpBlob, fileName);
} catch (error) {
console.error("Error converting image to WebP:", error);
}
};
/* rest of the relevant code */
<input
type="file"
name="image"
id="image"
accept="images/*"
onChange={handleFileUpload}
/>;
/* rest of the relevant code */
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);
});
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.
FAQs
A utility to convert images to WebP format
The npm package webpfy receives a total of 0 weekly downloads. As such, webpfy popularity was classified as not popular.
We found that webpfy demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.