Make sure backgroundImage supports base64-encoded images

Author: flekschas

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v0.10.1
+
+- Make sure `backgroundImage` supports base64-encoded images
+
 ## v0.10.0
 
 - Add `lassoClearEvent` property to allow customizing when the lasso is cleared.

src/utils.js

@@ -139,7 +139,10 @@ export const loadImage = (src, isCrossOrigin = false) =>
  */
 export const createTextureFromUrl = (regl, url) =>
   new Promise((resolve, reject) => {
-    loadImage(url, url.indexOf(window.location.origin) !== 0)
+    loadImage(
+      url,
+      url.indexOf(window.location.origin) !== 0 && url.indexOf('base64') === -1
+    )
       .then((image) => {
         resolve(regl.texture(image));
       })

tests/index.js

@@ -311,6 +311,22 @@ test('set({ backgroundImage })', async (t) => {
     300,
     'background image should be loaded by scatterplot'
   );
+
+  // Base64 image
+  scatterplot.set({
+    backgroundImage:
+      'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QDeRXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAAA4YwAA6AMAADhjAADoAwAABwAAkAcABAAAADAyMTABkQcABAAAAAECAwCGkgcAFQAAAMAAAAAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAABAAAAADoAQAAQAAABAAAAAAAAAAQVNDSUkAAABQaWNzdW0gSUQ6IDM1AP/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/CABEIABAAEAMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAEBf/EABQBAQAAAAAAAAAAAAAAAAAAAAT/2gAMAwEAAhADEAAAAXqhhMj/xAAZEAADAAMAAAAAAAAAAAAAAAABAgMFERP/2gAIAQEAAQUClkNit1EkQol3PT//xAAYEQACAwAAAAAAAAAAAAAAAAABAwACIf/aAAgBAwEBPwFa6jTP/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIBAyH/2gAIAQIBAT8Be12yD//EABsQAAIDAAMAAAAAAAAAAAAAAAABAhExIzKR/9oACAEBAAY/AuSHhJraOo1Wo//EABkQAAMBAQEAAAAAAAAAAAAAAAABESFBUf/aAAgBAQABPyHK09GZVWkzrMZfGL//2gAMAwEAAgADAAAAEG//xAAVEQEBAAAAAAAAAAAAAAAAAAAAAf/aAAgBAwEBPxCsP//EABURAQEAAAAAAAAAAAAAAAAAAABR/9oACAECAQE/EJG//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFBcZH/2gAIAQEAAT8QLFXq/H7McnD32o87LUuUMEBVpM48n//Z',
+  });
+
+  await new Promise((resolve) =>
+    scatterplot.subscribe('background-image-ready', resolve, 1)
+  );
+
+  t.equal(
+    scatterplot.get('backgroundImage').width,
+    16,
+    'base64 background image should be supported'
+  );
 });
 
 test('set({ cameraTarget, cameraDistance, cameraRotation, cameraView })', (t) => {