ImageExporter

Class used with an ArcticViewer server to update index.js metadata and thumbnails.

constructor(format=’image/jpeg’, padding=3)

Padding if used to ensure the generated timestamp have a constant size.

exportImage(data)

A POST request will be issued on ‘/export’ using the canvas and arguments available from the given data object.

updateMetadata(dataToSend)

A POST request will be issued on ‘/update’ with the exported image and metadata.

extractCanvasRegion(canvas, region, outputSize, format=’image/png’)

Helper method that will return a base64 encoded string representing the sub-region of a given canvas as an image.

Source

index.js

/* global XMLHttpRequest Image */

import CanvasOffscreenBuffer from 'paraviewweb/src/Common/Misc/CanvasOffscreenBuffer';

export default class ImageExporter {
  constructor(format = 'image/jpeg', padding = 3) {
    this.format = format;
    this.padding = padding;
    this.counter = 0;
    this.bgCanvas = null;
    this.imageToDecode = null;
  }

  exportImage(data) {
    const xhr = new XMLHttpRequest();
    const dataToSend = {};
    let ts = Number(this.counter).toString();
    this.counter += 1;

    if (!data.canvas || !data.arguments) {
      return;
    }

    while (ts.length < this.padding) {
      ts = `0${ts}`;
    }
    dataToSend.arguments = data.arguments;
    dataToSend.image = data.canvas.toDataURL(this.format);
    /* eslint-disable no-underscore-dangle */
    dataToSend.arguments.__ = ts;

    xhr.open('POST', '/export', true);
    xhr.responseType = 'text';
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onload = (e) => {
      if (xhr.status === 200) {
        console.log('exportImage success');
      }
    };

    xhr.onerror = (e) => {
      console.log('error export', data.arguments);
    };

    xhr.send(JSON.stringify(dataToSend));
  }

  updateMetadata(dataToSend) {
    // Validate image data and use a canvas to convert it if need be
    if (dataToSend.image.indexOf('blob:') !== -1) {
      if (!this.bgCanvas) {
        this.bgCanvas = new CanvasOffscreenBuffer(100, 100);
      }
      if (!this.imageToDecode) {
        this.imageToDecode = new Image();
      }

      // Decode image
      this.imageToDecode.src = dataToSend.image;

      // Resize canvas and draw image into it
      this.bgCanvas.size(this.imageToDecode.width, this.imageToDecode.height);
      this.bgCanvas.get2DContext().drawImage(this.imageToDecode, 0, 0);
      dataToSend.image = this.bgCanvas.toDataURL('image/png');
    }

    const xhr = new XMLHttpRequest();

    xhr.open('POST', '/update', true);
    xhr.responseType = 'text';
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onload = (e) => {
      if (xhr.status === 200) {
        console.log('updateMetadata success');
      }
    };

    xhr.onerror = (e) => {
      console.log('error export', e);
    };

    xhr.send(JSON.stringify(dataToSend));
  }

  extractCanvasRegion(canvas, region, outputSize, format = 'image/png') {
    if (!this.bgCanvas) {
      this.bgCanvas = new CanvasOffscreenBuffer(100, 100);
    }

    this.bgCanvas.size(outputSize[0], outputSize[1]);
    this.bgCanvas
      .get2DContext()
      .drawImage(
        canvas,
        region[0],
        region[1],
        region[2],
        region[3],
        0,
        0,
        outputSize[0],
        outputSize[1]
      );
    return this.bgCanvas.toDataURL(format);
  }
}