Sharp: Scaling the overlay?

[webbrandon]

Is there a way to scale the overlay image @lovell ? I saw a mention from you in the early discussions of the overlayWith feature that you can "resize/interpolate/ratio the overlay image" with methods that already exist.

This option would be useful for adding watermarks to images dynamic in size. Having an image of the same size or smaller presents other transformation issues in chaining this command when the overlay needs resizing unless scaling was added as an option or another API function was available like suggested in (#335) with .overlaySize().

USAGE

  .overlayWith("overlay.png", {
    scale: 0.15,
    gravity: center,
    tile: true
  })

or

  .overlaySize("100x100")
  .overlayWith("overlay.png", {
    gravity: center,
    tile: true
  })

[lovell]

Hi Brandon, is it possible that, in your scenario, the watermark could be represented by a vector image in the SVG format? If so, you could "dynamically" alter its viewBox attribute to fill the dimensions you need.

There are a lot of options, conditions and therefore complexity when resizing images and I'd rather keep the overlay/compositing part of the API as simple as we can.

[webbrandon]

I understand the hesitation. Thank you for the suggestion, been awhile since I worked with SVG but this could be a viable solution. I will explore this option.

If this works I won't need to request an opacity setting either :)

[webbrandon]

Thank you again @lovell . If anyone else faces this edge case here is a little share code:

function getWatermark(image, size){
    var svg;
    var xml = "<?xml version='1.0' encoding='UTF-8' standalone='no'?>";
    var svgHeadStart = "<svg ";
    if(size){
        svgHeadStart += "width='" + size + "' height='" + size + "' ";
    } else {
        svgHeadStart += "width='200px' height='200px' ";
    }
    var svgHeadEnd = "viewBox='0 0 200 200' id='svgwatermark' preserveAspectRatio='xMidYMid meet'>";
    var svgImage = "<image id='watermark' x='0' y='0' width='90%' height='90%' xlink:href='" + image + "' />";
    var svgTail = "</svg>";

    svg = xml + svgHeadStart + svgHeadEnd + svgImage + svgTail;

    return new Buffer(svg);
};

[lovell]

Thanks for the update - great to hear you got it working.

[gaurav16694]

hello @webbrandon I am getting the following error when I am using SVG

svgload_buffer: SVG rendering failed