unitedwardrobe / imgproxy-node Goto Github PK

Trying to generate an URL to the original image (with no-transformations) generates an invalid URL:

imgproxy
  .builder()
  .generateUrl('https://example.com/path/to/image.jpg');

tested with imgproxy server version 2.4

NOTE: after adding some / (slashes) in the middle of the Base64 fix the problem.

Hey mates. Could you please publish the latest 1.1.0 version to the npm registry. There is just 1.0.0 without presetOnly builder.
Thank you!

Example in readme is ok, but there is more methods I can use like size() instead of resize()

builder.ts looks beautiful but it's good to describe all the things

You can start from something like this:

Methods

Based on imgproxy interface's Generating the URL (Advanced)

resize(type, width, height, enlarge)

• type - resize type
• width - number
• height - number
• enlarge - boolean - enlarge if original smaller than required

size(width, height, enlarge)

• width - number
• height - number
• enlarge - boolean - enlarge if original smaller than required

dpr(number | string) - Device Pixel Ratio

Multiply image for displaying on screen with DPR > 1

(why string?)

enlarge(boolean)

Enlarge if original smaller than required

gravity(Gravity | FocusPoint)

Set Gravity option or configure Focus Point

quality(number)

Set image quality

background(RGBColor | HexColor)

When you convert an image with alpha-channel to JPEG

blur(number)

Apply the gaussian blur filter

sharpen(number)

Apply the sharpen filter

watermark(opacity, position, offset, scale)

Puts watermark on the processed image

• opacity - number
• position (optional) - string - ce|no|so|ea|we|noea|nowe|soea|sowe|re
• offset (optional) - { x: <number>, y: <number> } - not applicable to re position
• scale (optional) - number - size relative to the resulting image size

preset(...presets: string[])

Defines a list of presets to be used by imgproxy

(need details here)

cacheBuster(buster: string)

It’s highly recommended to prefer cachebuster option over URL query string because the option can be properly signed.

format(extension: string)

Alias for extension URL part.

The typescript type ResizingType does not match current imgproxy API definition. This should be corrected.

Expected Behavior

Typescript types should align with imgproxy API interface

Current Behavior

This library defines ResizingType as

export type ResizingType = 'fit' | 'fill' | 'crop';

The most recent imageproxy API documentation defines resizing_type as

Resizing type

Defines how imgproxy will resize the source image. Supported resizing types are:

• fit: resizes the image while keeping aspect ratio to fit a given size.
• fill: resizes the image while keeping aspect ratio to fill a given size and crops projecting parts.
• fill-down: the same as fill, but if the resized image is smaller than the requested size, imgproxy will crop the result to keep the requested aspect ratio.
• force: resizes the image without keeping the aspect ratio.
• auto: if both source and resulting dimensions have the same orientation (portrait or landscape), imgproxy will use fill. Otherwise, it will use fit.

Default: fit

Possible Solution

• Update type definitions in src/types.ts
• review all other type definitions and compare with current imgproxy API definition

We use native ESM in our backend project. Other libraries are starting to become ESM-only so we were forced to switch.

It would be nice to at least have this support ESM natively as well. Probably best to do dual ESM and CJS builds for compatibility.

IMGPROXY_SIGNATURE_SIZE: number of bytes to use for signature before encoding to Base64. Default: 32;

https://github.com/DarthSim/imgproxy/blob/master/docs/configuration.md#url-signature

imgproxy supports ignoring certain arguments, such as height, when calling resize. If you call resize with only the width, it will automatically respect the source image dimensions. In this line

Hi, I'm trying to add watermark to the image and as mentioned before

watermark(opacity, position, offset, scale)

and there isn't a way for the url so I was trying to add it using setOption but

public setOption(option: string, value: string) {
    this.options[option] = value;
  }

Is returning void which might result in a situation like this

      .builder()
      .resize('fit', 300, 200, false)
      .dpr(1)
      .quality(60)
      .watermark(20, WatermarkPosition.south_west, { x: 20, y: 20 }, 0)
      .setOption(
        'watermark_url',
        'base64 encoded url',
      )
      .generateUrl(imageUrl);

which results in TS2339: Property 'generateUrl' does not exist on type 'void'. by adding .setOption()

This currently throws a TypeError if config.baseUrl is not an absolute URL here. There has been an ongoing debate on adding support for relative URLs to the URL class. My current setup has to work with relative URLs as it's a backing server to multiple domains. It will be great to provide a flexible way to build the final URL.

A suggestion would be to support a url builder function in the config, for example:

export interface ImgproxyConfig {
  baseUrl: string;
  insecure?: boolean | string;
  urlBuilder?: (baseUrl: string, signature: string, uri: string): string
}

To work around this, I provide a placeholder url in the config and replace it after imgproxy url generation. It works great with relative urls:

const imageServerUrl = "/image-server/";
const urlHack = "https://www.example.com/";
const reverseHack = (generatedUrl: string) => {
  if (generatedUrl.startsWith(urlHack)) {
    return `${imageServerUrl}${generatedUrl.substring(urlHack.length)}`;
  }
  return generatedUrl;
};

const imgproxy = new ImageProxy({
  baseUrl: urlHack,
  key,
  salt,
  encode: true,
});

const imgUrl = reverseHack(imgproxy.builder().generateUrl(cdnUrl));