From 8a86304fead857456606e900f79f2259052dfae7 Mon Sep 17 00:00:00 2001
From: Jordi Sala Morales <jordism91@gmail.com>
Date: Tue, 4 Jun 2024 08:02:46 +0200
Subject: [PATCH] Improve performance of image processing (#135)

* Improve performance of image processing

* refactor

* add changelog
---
 .changeset/khaki-mirrors-smoke.md             |  5 ++++
 package-lock.json                             | 24 +++++++++++++++++--
 package.json                                  |  1 +
 .../translators/fills/translateImageFill.ts   |  4 +++-
 4 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/khaki-mirrors-smoke.md

diff --git a/.changeset/khaki-mirrors-smoke.md b/.changeset/khaki-mirrors-smoke.md
new file mode 100644
index 00000000..6f10674a
--- /dev/null
+++ b/.changeset/khaki-mirrors-smoke.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Improve image processing speed
diff --git a/package-lock.json b/package-lock.json
index 3b3a9479..1d30ce32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
   "name": "penpot-exporter",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "penpot-exporter",
-      "version": "0.3.1",
+      "version": "0.4.1",
       "license": "MPL2.0",
       "dependencies": {
         "@create-figma-plugin/ui": "^3.2",
+        "base64-js": "^1.5",
         "classnames": "^2.5",
         "preact": "^10.21",
         "react-hook-form": "^7.51",
@@ -3240,6 +3241,25 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/better-path-resolve": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/better-path-resolve/-/better-path-resolve-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4782e6e6..c4551052 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "license": "MPL2.0",
   "dependencies": {
     "@create-figma-plugin/ui": "^3.2",
+    "base64-js": "^1.5",
     "classnames": "^2.5",
     "preact": "^10.21",
     "react-hook-form": "^7.51",
diff --git a/plugin-src/translators/fills/translateImageFill.ts b/plugin-src/translators/fills/translateImageFill.ts
index 5f8bf43b..d2f3ab2d 100644
--- a/plugin-src/translators/fills/translateImageFill.ts
+++ b/plugin-src/translators/fills/translateImageFill.ts
@@ -1,3 +1,5 @@
+import { fromByteArray } from 'base64-js';
+
 import { imagesLibrary } from '@plugin/ImageLibrary';
 import { detectMimeType } from '@plugin/utils';
 
@@ -36,7 +38,7 @@ const generateAndRegister = async (imageHash: string) => {
 
   const bytes = await image.getBytesAsync();
   const { width, height } = await image.getSizeAsync();
-  const b64 = figma.base64Encode(bytes);
+  const b64 = fromByteArray(bytes);
   const mtype = detectMimeType(b64);
   const dataUri = `data:${mtype};base64,${b64}`;