How can I erase an arbitrary part of an image?

[davidjoy]

Hi there,

I'm trying to figure out how I can make part of an image transparent again (think the "eraser" tool in Photoshop). I have an image and need to be able to cut an alpha: 0 hole in an arbitrary part of it, but haven’t been able to find the right incantation!

I've been trying to do this by overlaying a transparent image the size I'm lookin' for on top of my original image using overlayWith, but I think what's going on is that because it's alpha: 0, it effectively gets composited in as a no-op and doesn't change the underlying pixels.

Here's an example of what's not quite working for me:

// Don't mind me while I await...
let overlayBuffer = await sharp({
    create: {
        width: 10,
        height: 10,
        channels: 4,
        background: {r: 0, g: 0, b: 0, alpha: 0}
    }
}).png().toBuffer(); // The "png()" seems to be necessary.

// For an example, say that "originalBuffer" here is a 100x100 image of a duck.  
// Something with real, substantive, amazing content that I want to chop a hole in.
let resultBuffer = await sharp(originalBuffer).overlayWith({
    overlayBuffer, {
        top: 8,
        left: 8,
    }
)

I want to tell overlayWith to "blow away whatever was in this particular spot and replace it with this buffer", essentially.

I've been staring at the documentation for a few hours and pouring over Github issues, and I can't find an answer; apologies if it's out there and I just couldn't find it! Thanks in advance for any advice.

[davidjoy]

Reading the overlayWith doc even more closely, I see the line "If the overlay image contains an alpha channel then composition with premultiplication will occur." It's been a while since my CG classes, but I'm assuming premultiplication is why my current approach isn't working out so well. Still hoping there's something I'm missing, or I'm kind of sunk! Thanks again.

[lovell]

Hello, did you see the cutout option of overlayWith? The third example in the README uses this.

[davidjoy]

Ah! SVG! I did see the cutout option, but couldn't figure out how I could easily use it to drop a section in the middle of my image. I missed that example in the README and it never even crossed my mind I could use SVG. Awesome. Let me give this a shot and I'll happily come back here and post my solution (maybe for that cookbook I saw labels for?) when I get it working. Thanks so much for the quick response!

[davidjoy]

Worked like a charm. Thanks so much! Here's my code, minus the gunk that dynamically sizes the SVG elements to my various use cases:

const cutoutBuffer = new Buffer(
    `<svg xmlns="http://www.w3.org/2000/svg" width="144" height="160">
        <rect x="0" y="0" width="80" height="160" fill="#ff0000" />
        <rect x="80" y="0" width="48" height="80" fill="#00ff00"  />
        <rect x="80" y="128" width="48" height="32" fill="#0000ff" />
        <rect x="128" y="0" width="32" height="160" fill="#ff00ff" />
    </svg>`
);

let resultBuffer = await sharp(originalBuffer) // In this case, a 144x160 image
    .overlayWith(cutoutBuffer, { cutout: true, left: 0, top: 0 }).toBuffer();

This produces an SVG something like this:

Which, hey, makes cutout: true work perfectly for deleting an arbitrary square o' the image.

Thanks for the advice!

[lovell]

Glad you got it working, thanks for the detailed solution to help others.