feat: add API for returning PNG pixels data

__test__/helper.ts

@@ -0,0 +1,27 @@
+import jimp from 'jimp-compact'
+
+/**
+ * Convert image to RGBA pixels Array
+ * Traverse the pixels in the order from left to right and top to bottom.
+ *
+ * @param {Buffer} imgBuffer
+ * @param {Number} width image width
+ * @param {Number} height image height
+ * @returns {Array}, e.g. [255, 0, 0, 255, 255, 0, 0, 255]
+ */
+async function jimpToRgbaPixels(imgBuffer: Buffer, width: number, height: number) {
+  const result = await jimp.read(imgBuffer)
+  const pixels = []
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const pixel = jimp.intToRGBA(result.getPixelColor(x, y))
+      pixels.push(pixel.r)
+      pixels.push(pixel.g)
+      pixels.push(pixel.b)
+      pixels.push(pixel.a)
+    }
+  }
+  return pixels
+}
+
+export { jimpToRgbaPixels }

__test__/index.spec.ts

@@ -6,6 +6,24 @@ import jimp from 'jimp-compact'
 
 import { Resvg, renderAsync } from '../index'
 
+import { jimpToRgbaPixels } from './helper'
+
+test('svg to RGBA pixels Array', async (t) => {
+  const svg = `<svg width="10px" height="5px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="red" x="0" y="0" width="5" height="5"></rect>
+    <rect fill="green" x="5" y="0" width="5" height="5"></rect>
+  </svg>`
+  const resvg = new Resvg(svg)
+  const pngData = resvg.render()
+  const pngBuffer = pngData.asPng()
+
+  const originPixels = pngData.pixels.toJSON().data
+  const pixelArray = await jimpToRgbaPixels(pngBuffer, pngData.width, pngData.height)
+
+  t.is(originPixels.length, pixelArray.length)
+  t.is(originPixels.toString(), pixelArray.toString())
+})
+
 test('fit to width', async (t) => {
   const filePath = '../example/text.svg'
   const svg = await fs.readFile(join(__dirname, filePath))

__test__/wasm.spec.ts

@@ -7,11 +7,29 @@ import jimp from 'jimp-compact'
 
 import { Resvg, initWasm } from '../wasm'
 
+import { jimpToRgbaPixels } from './helper'
+
 // Init Wasm
 test.before(async () => {
   await initWasm(fs.readFile(join(__dirname, '../wasm/index_bg.wasm')))
 })
 
+test('svg to RGBA pixels Array', async (t) => {
+  const svg = `<svg width="10px" height="5px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="red" x="0" y="0" width="5" height="5"></rect>
+    <rect fill="green" x="5" y="0" width="5" height="5"></rect>
+  </svg>`
+  const resvg = new Resvg(svg)
+  const pngData = resvg.render()
+  const pngBuffer = pngData.asPng()
+
+  const originPixels = Array.from(pngData.pixels)
+  const pixelArray = await jimpToRgbaPixels(Buffer.from(pngBuffer), pngData.width, pngData.height)
+
+  t.is(originPixels.length, pixelArray.length)
+  t.is(originPixels.toString(), pixelArray.toString())
+})
+
 test('buffer input', async (t) => {
   const filePath = '../example/text.svg'
   const svg = await fs.readFile(join(__dirname, filePath))

index.d.ts

@@ -87,6 +87,9 @@ 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
 

js-binding.d.ts

@@ -43,6 +43,8 @@ export class Resvg {
 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 */

src/lib.rs

@@ -107,6 +107,20 @@ impl RenderedImage {
         Ok(buffer.as_slice().into())
     }
 
+    /// Get the RGBA pixels of the image
+    #[cfg(target_arch = "wasm32")]
+    #[wasm_bindgen(getter)]
+    pub fn pixels(&self) -> js_sys::Uint8Array {
+        self.pix.data().into()
+    }
+
+    /// Get the RGBA pixels of the image
+    #[cfg(not(target_arch = "wasm32"))]
+    #[napi(getter)]
+    pub fn pixels(&self) -> Buffer {
+        self.pix.data().into()
+    }
+
     #[cfg(not(target_arch = "wasm32"))]
     #[napi(getter)]
     /// Get the PNG width

wasm/index.d.ts

@@ -27,6 +27,10 @@ declare class RenderedImage {
 	*/
 	readonly height: number;
 	/**
+	* Get the RGBA pixels of the image
+	*/
+	readonly pixels: Uint8Array;
+	/**
 	* Get the PNG width
 	*/
 	readonly width: number;

wasm/index.js

@@ -204,6 +204,10 @@ var RenderedImage = class {
       wasm.__wbindgen_add_to_stack_pointer(16);
     }
   }
+  get pixels() {
+    const ret = wasm.renderedimage_pixels(this.ptr);
+    return takeObject(ret);
+  }
 };
 var Resvg = class {
   static __wrap(ptr) {

wasm/index.mjs

@@ -177,6 +177,10 @@ var RenderedImage = class {
       wasm.__wbindgen_add_to_stack_pointer(16);
     }
   }
+  get pixels() {
+    const ret = wasm.renderedimage_pixels(this.ptr);
+    return takeObject(ret);
+  }
 };
 var Resvg = class {
   static __wrap(ptr) {