Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do make solid border around image instead of a blur? #4196

Closed
SuperDTF opened this issue Aug 22, 2024 · 2 comments
Closed

How do make solid border around image instead of a blur? #4196

SuperDTF opened this issue Aug 22, 2024 · 2 comments
Labels

Comments

@SuperDTF
Copy link

1

This code keeps giving me a blur instead of a composite layer with a solid outline. Anyway to achieve this using sharp?

const drawOutlineSharp = async (
    input,
    thickness = 10,
    backgroundColor = { r: 255, g: 255, b: 255, alpha: 1 }
) => {
    try {
        let sharpInstance = sharp(input);
        const metadata = await sharpInstance.metadata();
        console.log('Image metadata:', metadata);

        // Step 1: Create a blurred outline
        const blurredOutline = await sharpInstance
            .clone()
            .blur(thickness)
            .toBuffer();

        // Step 2: Tint the blurred outline
        const tintedOutline = await sharp(blurredOutline)
            .tint(backgroundColor)
            .toBuffer();

        // Step 3: Composite the original image over the tinted outline
        const result = await sharp(tintedOutline)
            .composite([
                {
                    input: await sharpInstance.toBuffer(),
                    blend: 'over'
                }
            ])
            .png()
            .toBuffer();

        console.log('Final image composited. Buffer size:', result.length);

        return sharp(result);
    } catch (error) {
        console.error('Error in drawOutlineSharp:', error);
        throw error;
    }
};
@lovell
Copy link
Owner

lovell commented Aug 24, 2024

You should be able to composite the original input directly and avoid an unnecessary decode/encode round-trip.

-                    input: await sharpInstance.toBuffer(),
+                    input,

@lovell
Copy link
Owner

lovell commented Sep 23, 2024

I hope this information helped. Please feel free to re-open with more details if further assistance is required.

@lovell lovell closed this as completed Sep 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants