base64-image-utils - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

 # CHANGELOG
 
+# 1.1.0
+- Removes the heavy matrix extraction processing from the main thread, allowing the user to stay interactive with the page meanwhile. Thanks @josejbreijo !
+
 # 1.0.2
@@ -4,0 +7,0 @@ - Changed `base64ImageToImageData` to `base64ImageToImageRawData`.

lib/base64ImageToRGBMatrix.js

@@ -1,12 +0,9 @@
-var base64ImageToRGBMatrix = function(base64, callback, options) {
-  var opts = options || {};
+const { createWorker } = require("./utils");
 
-  var img = new window.Image();
+const base64ImageToRGBMatrix = function(base64, callback, opts = {}) {
+  const img = new window.Image();
+
   img.onload = function onImageLoad() {
-    var canvas = document.createElement("canvas");
-    var ctx;
-    var data;
-    var result;
+    let resizeRatio = 1;
 
-    var resizeRatio = 1;
     if (opts.size) {
@@ -22,27 +19,45 @@ resizeRatio = opts.size / Math.max(img.width, img.height);
 
-    var imageWidth = Math.floor(img.width * resizeRatio);
-    var imageHeight = Math.floor(img.height * resizeRatio);
+    const canvas = document.createElement("canvas");
 
-    canvas.width = imageWidth;
-    canvas.height = imageHeight;
+    canvas.width = Math.floor(img.width * resizeRatio);
+    canvas.height = Math.floor(img.height * resizeRatio);
 
-    ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
-    data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
+    const { data } = ctx.getImageData(
+      0,
+      0,
+      ctx.canvas.width,
+      ctx.canvas.height
+    );
 
-    result = [];
-    for (var y = 0; y < canvas.height; y++) {
-      result[y] = [];
-      for (var x = 0; x < canvas.width; x++) {
-        result[y][x] = {
-          r: data[y * canvas.width * 4 + x * 4],
-          g: data[y * canvas.width * 4 + x * 4 + 1],
-          b: data[y * canvas.width * 4 + x * 4 + 2],
-          a: data[y * canvas.width * 4 + x * 4 + 3]
-        };
-      }
+    function workerCode() {
+      self.onmessage = function onWorkerJobStarted(message) {
+        const [data, width, height] = message.data;
+        let result = [];
+        for (var y = 0; y < height; y++) {
+          result[y] = [];
+          for (var x = 0; x < width; x++) {
+            result[y][x] = {
+              r: data[y * width * 4 + x * 4],
+              g: data[y * width * 4 + x * 4 + 1],
+              b: data[y * width * 4 + x * 4 + 2],
+              a: data[y * width * 4 + x * 4 + 3]
+            };
+          }
+        }
+        self.postMessage([result]);
+      };
     }
 
-    callback(null, result);
+    const worker = createWorker(workerCode);
+    const { width, height } = canvas;
+
+    worker.postMessage([data, width, height]);
+
+    worker.onmessage = function onWorkerJobCompleted(message) {
+      const [result] = message.data;
+      callback(null, result);
+    };
   };
@@ -49,0 +64,0 @@ img.src = base64;

package.json

 {
   "name": "base64-image-utils",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Utils for base64 image data.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -53,2 +53,1 @@ # base64 image utils
 You can optionally send a third `options` parameter, which is an object that can hold `width` or `maxWidth` values.
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7205

increased by13.43%

Number of package files

8

increased by14.29%

Lines of code

137

increased by15.13%

Worsened metrics

Number of lines in readme file

53

decreased by-1.85%

No dependency changes