From ce7bbe023f8de19e3063ed7d56dce5b759bdcad7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=9D?= <percyley@qq.com>
Date: Fri, 24 Jun 2022 13:56:44 +0800
Subject: [PATCH] feat: add .pixel() API

---
 __test__/index.spec.ts | 42 ++++++++++++++++++++++++++++++++++++++++++
 index.d.ts             |  3 +++
 js-binding.d.ts        |  2 ++
 src/lib.rs             | 13 +++++++++++++
 4 files changed, 60 insertions(+)

diff --git a/__test__/index.spec.ts b/__test__/index.spec.ts
index 3e9e6c71..8a1ef738 100755
--- a/__test__/index.spec.ts
+++ b/__test__/index.spec.ts
@@ -6,6 +6,48 @@ import jimp from 'jimp'
 
 import { Resvg, renderAsync } from '../index'
 
+/**
+ * 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 imgToRgbaPixel(imgBuffer, width, height) {
+  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))
+      // const rgba = `${pixel.r}, ${pixel.g}, ${pixel.b}, ${pixel.a}`
+      pixels.push(pixel.r)
+      pixels.push(pixel.g)
+      pixels.push(pixel.b)
+      pixels.push(pixel.a)
+    }
+  }
+  return pixels
+}
+
+test.only('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.pixel.toJSON().data
+  const pixelArray = await imgToRgbaPixel(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))
diff --git a/index.d.ts b/index.d.ts
index 1b5292cf..3c324bb9 100755
--- a/index.d.ts
+++ b/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 pixel(): Buffer
+
   /** Get the PNG width */
   get width(): number
 
diff --git a/js-binding.d.ts b/js-binding.d.ts
index 1e21cb98..199d2bcb 100644
--- a/js-binding.d.ts
+++ b/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 pixel(): Buffer
   /** Get the PNG width */
   get width(): number
   /** Get the PNG height */
diff --git a/src/lib.rs b/src/lib.rs
index 205b1d6b..c2376fde 100755
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -107,6 +107,19 @@ impl RenderedImage {
         Ok(buffer.as_slice().into())
     }
 
+    /// Get the RGBA pixels of the image
+    #[cfg(target_arch = "wasm32")]
+    pub fn pixel(&self) -> js_sys::Uint8Array {
+        self.pix.data().into()
+    }
+
+    /// Get the RGBA pixels of the image
+    #[cfg(not(target_arch = "wasm32"))]
+    #[napi(getter)]
+    pub fn pixel(&self) -> Buffer {
+        self.pix.data().into()
+    }
+
     #[cfg(not(target_arch = "wasm32"))]
     #[napi(getter)]
     /// Get the PNG width