shared.js

  1. // Common functions for use across other geoApi modules
  2. 'use strict';
  4. function getLayerTypeBuilder(esriBundle) {
  5.     /**
  6.     * Will return a string indicating the type of layer a layer object is.
  7.     * @method getLayerType
  8.     * @param  {Object} layer an ESRI API layer object
  9.     * @return {String} layer type
  10.     */
  11.     return layer => {
  12.         if (layer instanceof esriBundle.FeatureLayer) {
  13.             return 'FeatureLayer';
  14.         } else if (layer instanceof esriBundle.WmsLayer) {
  15.             return 'WmsLayer';
  16.         } else if (layer instanceof esriBundle.ArcGISDynamicMapServiceLayer) {
  17.             return 'ArcGISDynamicMapServiceLayer';
  18.         } else if (layer instanceof esriBundle.ArcGISTiledMapServiceLayer) {
  19.             return 'ArcGISTiledMapServiceLayer';
  20.         } else {
  21.             // Can add more types above as we support them
  22.             return 'UNKNOWN';
  23.         }
  24.     };
  26. }
  28. /**
  29. * Get a 'good enough' uuid. For backup purposes if client does not supply its own
  30. * unique layer id
  31. *
  32. * @method  generateUUID
  33. * @returns {String} a uuid
  34. */
  35. function generateUUID() {
  36.     let d = Date.now();
  37.     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
  38.         // do math!
  39.         /*jslint bitwise: true */
  40.         const r = (d + Math.random() * 16) % 16 | 0;
  41.         d = Math.floor(d / 16);
  42.         return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  43.         /*jslint bitwise: false */
  44.     });
  45. }
  47. /**
  48. * Convert an image to a canvas element
  49. *
  50. * @param {String} url image url to convert (result from the esri print task)
  51. * @param {Object} canvas [optional = null] canvas to draw the image upon; if not supplied, a new canvas will be made
  52. * @param {Boolean} crossOrigin [optional = true] when set, tries to fetch an image with crossOrigin = anonymous
  53. * @return {Promise} conversion promise resolving into a canvas of the image
  54. */
  55. function convertImageToCanvas(url, canvas = null, crossOrigin = true) {
  56.     canvas = canvas || document.createElement('canvas');
  58.     const image = document.createElement('img'); // create image node
  60.     if (crossOrigin) {
  61.         image.crossOrigin = 'Anonymous'; // configure the CORS request
  62.     }
  64.     const conversionPromise = new Promise((resolve, reject) => {
  65.         image.addEventListener('load', () => {
  67.             canvas.width = image.width; // changing canvas size will clear all previous content
  68.             canvas.height = image.height;
  69.             canvas.getContext('2d').drawImage(image, 0, 0); // draw image onto a canvas
  71.             // return canvas
  72.             resolve(canvas);
  73.         });
  74.         image.addEventListener('error', error =>
  75.             reject(error));
  76.     });
  78.     // set image source to the one generated from the print task
  79.     image.src = url;
  81.     return conversionPromise;
  82. }
  84. /**
  85.  * Loads an image (as crossing) and converts it to dataURL. If a supplied imageUri is already a dataURL, just return it.
  86.  * If an image fails to load with the crossing attribute, return the original imageUri
  87.  *
  88.  * @function convertImagetoDataURL
  89.  * @param {String} imageUri url of the image to load and convert
  90.  * @param {String} imageType [optional = 'image/png'] format of the image representation
  91.  * @return {Promise} promise resolving with the dataURL of the image
  92.  */
  93. function convertImagetoDataURL(imageUri, imageType = 'image/png') {
  94.     // this is already a dataUrl, just return
  95.     if (imageUri.startsWith('data')) {
  96.         console.log('ImageUri is already a data url');
  97.         return Promise.resolve(imageUri);
  98.     }
  100.     const loadingPromise = convertImageToCanvas(imageUri)
  101.         .then(canvas => {
  102.             console.log('Converting image to dataURL');
  103.             return canvas.toDataURL(imageType);
  104.         })
  105.         .catch(error => {
  106.             console.error('Failed to load crossorigin image', imageUri, error);
  107.             return imageUri;
  108.         });
  110.     return loadingPromise;
  111. }
  113. module.exports = esriBundle => ({
  114.     getLayerType: getLayerTypeBuilder(esriBundle),
  115.     generateUUID,
  116.     convertImageToCanvas,
  117.     convertImagetoDataURL
  118. });