Add PNG export button

Author: flekschas

example/axes.js

@@ -5,6 +5,7 @@ import { scaleLinear } from 'd3-scale';
 import { select } from 'd3-selection';
 
 import createScatterplot from '../src';
+import { saveAsPng } from './utils';
 
 const parentWrapper = document.querySelector('#parent-wrapper');
 const canvasWrapper = document.querySelector('#canvas-wrapper');
@@ -17,6 +18,7 @@ const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator');
 const resetEl = document.querySelector('#reset');
+const exportEl = document.querySelector('#export');
 const exampleBg = document.querySelector('#example-axes');
 
 exampleBg.setAttribute('class', 'active');
@@ -83,6 +85,8 @@ const scatterplot = createScatterplot({
   showRecticle: true,
 });
 
+exportEl.addEventListener('click', () => saveAsPng(scatterplot));
+
 console.log(`Scatterplot v${scatterplot.get('version')}`);
 
 scatterplot.subscribe('select', selectHandler);

example/connected-points-by-segments.js

@@ -1,6 +1,7 @@
 /* eslint no-console: 0 */
 
 import createScatterplot from '../src';
+import { saveAsPng } from './utils';
 
 const canvas = document.querySelector('#canvas');
 const numPointsEl = document.querySelector('#num-points');
@@ -11,6 +12,7 @@ const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator');
 const resetEl = document.querySelector('#reset');
+const exportEl = document.querySelector('#export');
 const exampleEl = document.querySelector(
   '#example-connected-points-by-segment'
 );
@@ -61,6 +63,8 @@ const scatterplot = createScatterplot({
   pointConnectionSize,
 });
 
+exportEl.addEventListener('click', () => saveAsPng(scatterplot));
+
 console.log(`Scatterplot v${scatterplot.get('version')}`);
 
 scatterplot.subscribe('select', selectHandler);

example/connected-points.js

@@ -1,6 +1,7 @@
 /* eslint no-console: 0 */
 
 import createScatterplot from '../src';
+import { saveAsPng } from './utils';
 
 const canvas = document.querySelector('#canvas');
 const numPointsEl = document.querySelector('#num-points');
@@ -11,6 +12,7 @@ const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator');
 const resetEl = document.querySelector('#reset');
+const exportEl = document.querySelector('#export');
 const exampleEl = document.querySelector('#example-connected-points');
 
 exampleEl.setAttribute('class', 'active');
@@ -59,6 +61,8 @@ const scatterplot = createScatterplot({
   pointConnectionSize,
 });
 
+exportEl.addEventListener('click', () => saveAsPng(scatterplot));
+
 console.log(`Scatterplot v${scatterplot.get('version')}`);
 
 scatterplot.subscribe('select', selectHandler);

example/index.html

@@ -176,6 +176,18 @@
         text-decoration-color: rgba(255, 255, 255, 1);
       }
 
+      .two-button-group {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .two-button-group > button,
+      .two-button-group > a.button-like {
+        box-sizing: border-box;
+        width: calc(50% - 0.125rem);
+        text-align: center;
+      }
+
       .smaller {
         font-size: 0.9em;
       }
@@ -459,12 +471,15 @@ <h1 id="title">Regl Scatterplot</h1>
           </li>
         </ul>
         <hr />
-        <a
-          class="button-like"
-          href="https://github.com/flekschas/regl-scatterplot"
-          target="_blank"
-          >Source code</a
-        >
+        <div class="two-button-group">
+          <button id="export">Export as PNG</button>
+          <a
+            class="button-like"
+            href="https://github.com/flekschas/regl-scatterplot"
+            target="_blank"
+            >Source code</a
+          >
+        </div>
       </aside>
     </header>
     <div id="parent-wrapper">

example/index.js

@@ -1,6 +1,7 @@
 /* eslint no-console: 0 */
 
 import createScatterplot from '../src';
+import { saveAsPng } from './utils';
 
 const canvas = document.querySelector('#canvas');
 const numPointsEl = document.querySelector('#num-points');
@@ -11,6 +12,7 @@ const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator');
 const resetEl = document.querySelector('#reset');
+const exportEl = document.querySelector('#export');
 const exampleEl = document.querySelector('#example-basic');
 
 exampleEl.setAttribute('class', 'active');
@@ -69,6 +71,8 @@ const scatterplot = createScatterplot({
   recticleColor,
 });
 
+exportEl.addEventListener('click', () => saveAsPng(scatterplot));
+
 console.log(`Scatterplot v${scatterplot.get('version')}`);
 
 scatterplot.subscribe('pointover', pointoverHandler);

example/performance-mode.js

@@ -1,5 +1,6 @@
 /* eslint no-console: 0 */
 import { createWorker } from '@flekschas/utils';
+import { saveAsPng } from './utils';
 
 import createScatterplot from '../src';
 import pointWorkerFn from './performance-mode-point-worker';
@@ -15,6 +16,7 @@ const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator');
 const resetEl = document.querySelector('#reset');
+const exportEl = document.querySelector('#export');
 const exampleEl = document.querySelector('#example-performance-mode');
 
 exampleEl.setAttribute('class', 'active');
@@ -75,6 +77,8 @@ const scatterplot = createScatterplot({
   performanceMode: true,
 });
 
+exportEl.addEventListener('click', () => saveAsPng(scatterplot));
+
 console.log(`Scatterplot v${scatterplot.get('version')}`);
 
 scatterplot.subscribe('select', selectHandler);

example/size-encoding.js

@@ -4,6 +4,7 @@ import { scaleLog } from 'd3-scale';
 import { randomExponential } from 'd3-random';
 
 import createScatterplot from '../src';
+import { saveAsPng } from './utils';
 
 const canvas = document.querySelector('#canvas');
 const numPointsEl = document.querySelector('#num-points');
@@ -14,6 +15,7 @@ const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator');
 const resetEl = document.querySelector('#reset');
+const exportEl = document.querySelector('#export');
 const exampleEl = document.querySelector('#example-size-encoding');
 
 exampleEl.setAttribute('class', 'active');
@@ -55,6 +57,8 @@ const scatterplot = createScatterplot({
   recticleColor,
 });
 
+exportEl.addEventListener('click', () => saveAsPng(scatterplot));
+
 console.log(`Scatterplot v${scatterplot.get('version')}`);
 
 scatterplot.subscribe('select', selectHandler);

example/texture-background.js

@@ -1,6 +1,7 @@
 /* eslint no-console: 0 */
 
 import createScatterplot from '../src';
+import { saveAsPng } from './utils';
 
 const canvas = document.querySelector('#canvas');
 const numPointsEl = document.querySelector('#num-points');
@@ -11,6 +12,7 @@ const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator');
 const resetEl = document.querySelector('#reset');
+const exportEl = document.querySelector('#export');
 const exampleEl = document.querySelector('#example-background');
 
 exampleEl.setAttribute('class', 'active');
@@ -50,6 +52,8 @@ const scatterplot = createScatterplot({
   )}/?random`,
 });
 
+exportEl.addEventListener('click', () => saveAsPng(scatterplot));
+
 console.log(`Scatterplot v${scatterplot.get('version')}`);
 
 scatterplot.subscribe('select', selectHandler);

example/transition.js

@@ -1,6 +1,7 @@
 /* eslint no-console: 0 */
 
 import createScatterplot from '../src';
+import { saveAsPng } from './utils';
 
 const canvas = document.querySelector('#canvas');
 const numPointsEl = document.querySelector('#num-points');
@@ -11,6 +12,7 @@ const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator');
 const resetEl = document.querySelector('#reset');
+const exportEl = document.querySelector('#export');
 const exampleEl = document.querySelector('#example-transition');
 
 exampleEl.setAttribute('class', 'active');
@@ -53,6 +55,8 @@ const scatterplot = createScatterplot({
   recticleColor,
 });
 
+exportEl.addEventListener('click', () => saveAsPng(scatterplot));
+
 console.log(`Scatterplot v${scatterplot.get('version')}`);
 
 scatterplot.subscribe('select', selectHandler);

example/utils.js

@@ -0,0 +1,42 @@
+export function downloadBlob(blob, name = 'file.txt') {
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = name;
+
+  document.body.appendChild(link);
+
+  link.dispatchEvent(
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    })
+  );
+
+  document.body.removeChild(link);
+}
+
+export function saveAsPng(scatterplot) {
+  const { pixels, width, height } = scatterplot.export();
+
+  const c = document.createElement('canvas');
+  c.width = width;
+  c.height = height;
+
+  const ctx = c.getContext('2d');
+  ctx.putImageData(new ImageData(pixels, width, height), 0, 0);
+
+  // The following is only needed to flip the image vertically. Since `ctx.scale`
+  // only affects `draw*()` calls and not `put*()` calls we have to draw the
+  // image twice...
+  const imageObject = new Image();
+  imageObject.onload = () => {
+    ctx.clearRect(0, 0, width, height);
+    ctx.scale(1, -1);
+    ctx.drawImage(imageObject, 0, -height);
+    c.toBlob((blob) => {
+      downloadBlob(blob, 'scatter.png');
+    });
+  };
+  imageObject.src = c.toDataURL();
+}