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

Feature request: (nice to have) output should extend ImageData #300

Open
yjutard-while-at-atlassian opened this issue Feb 20, 2024 · 6 comments
Labels
good first issue Good for newcomers

Comments

@yjutard-while-at-atlassian

Hi, thanks for this lib that looks great! (I'm still evaluating)

I'm trying to pass the output to another lib, which requires an ImageData input:

class ImageData {
  data, // Uint8ClampedArray one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (inclusive). The order goes by rows from the top-left pixel to the bottom-right.
  colorSpace, // string indicating the color space of the image data.
  height,
  width,
}

Looking at the output of resvg-js, it looks extremely similar:

export class RenderedImage {
  /** Write the image data to Buffer */
  asPng(): Buffer
  /** Get the RGBA pixels of the image */
  get pixels(): Buffer
  /** Get the PNG width */
  get width(): number
  /** Get the PNG height */
  get height(): number
}

My suggestion is to switch the output of resvg-js to the standard API ImageData or provide a conversion function, ex. toImageData()

@yisibl yisibl added the good first issue Good for newcomers label Feb 28, 2024
@yisibl
Copy link
Member

yisibl commented Feb 28, 2024

I haven't used ImageData, so resvg-js is mostly missing ImageData.colorSpace and the Uint8ClampedArray needed for ImageData.data?

See also: #123

@yisibl
Copy link
Member

yisibl commented Feb 28, 2024

Note: This structure is available in the node-related canvas library.
https://github.com/Brooooooklyn/canvas/blob/a6b5cc4a45e2b58d7576ee413eff156f394511ff/index.d.ts#L169-L186

@yisibl
Copy link
Member

yisibl commented Feb 28, 2024

resvg currently always uses the sRGB color space. See: linebender/resvg#629

@yisibl
Copy link
Member

yisibl commented Feb 28, 2024

Please see that having #304 is the solution to your needs?

@yisibl
Copy link
Member

yisibl commented Mar 24, 2024

ping @yjutard

@yjutard-while-at-atlassian
Copy link
Author

yjutard-while-at-atlassian commented Mar 26, 2024

Thanks @yisibl
I was able to convert resvg's output to ImageData without effort:

const renderedImage = resvg.render();
const imageData = { // https://developer.mozilla.org/en-US/docs/Web/API/ImageData
    width: renderedImage.width,
    height: renderedImage.height,
    colorSpace: 'srgb', // let's try...
    data: renderedImage.pixels,
};
let { top, right, bottom, left } = getTrimEdges(imageData); // it works! (npm lib trim-image-data)

So it seems the current "pixels" format is OK ✅

My comment was about the data shape. Instead of inventing a new one, suggestion to use a "standard" one.

All good, not critical since the conversion is trivial. This issue can serve as doc. Feel free to close it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants