signal-desktop/js/views/identicon_svg_view.js

// Copyright 2015-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

/* global Whisper, loadImage */

// eslint-disable-next-line func-names
(function () {
  window.Whisper = window.Whisper || {};

  /*
   * Render an avatar identicon to an svg for use in a notification.
   */
  Whisper.IdenticonSVGView = Whisper.View.extend({
    templateName: 'identicon-svg',
    initialize(options) {
      this.render_attributes = options;
      this.render_attributes.color = COLORS[this.render_attributes.color];
    },
    getSVGUrl() {
      const html = this.render().$el.html();
      const svg = new Blob([html], { type: 'image/svg+xml;charset=utf-8' });
      return URL.createObjectURL(svg);
    },
    getDataUrl() /* : Promise<string> */ {
      const svgurl = this.getSVGUrl();
      return new Promise(resolve => {
        const img = document.createElement('img');
        img.onload = () => {
          const canvas = loadImage.scale(img, {
            canvas: true,
            maxWidth: 100,
            maxHeight: 100,
          });
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
          URL.revokeObjectURL(svgurl);
          resolve(canvas.toDataURL('image/png'));
        };
        img.onerror = () => {
          URL.revokeObjectURL(svgurl);
          // If this fails for some reason, we'd rather continue on than reject.
          resolve(undefined);
        };

        img.src = svgurl;
      });
    },
  });

  const COLORS = {
    red: '#cc163d',
    deep_orange: '#c73800',
    brown: '#746c53',
    pink: '#a23474',
    purple: '#862caf',
    indigo: '#5951c8',
    blue: '#336ba3',
    teal: '#067589',
    green: '#3b7845',
    light_green: '#1c8260',
    blue_grey: '#895d66',
    grey: '#6b6b78',
    ultramarine: '#2c6bed',
  };
})();