ding-image-editor 3.15.3

package/src/js/helper/imagetracer.js

@@ -0,0 +1,1396 @@
+/*
+  imagetracer.js version 1.2.4
+  Simple raster image tracer and vectorizer written in JavaScript.
+  andras@jankovics.net
+*/
+
+/*
+  The Unlicense / PUBLIC DOMAIN
+  This is free and unencumbered software released into the public domain.
+  Anyone is free to copy, modify, publish, use, compile, sell, or
+  distribute this software, either in source code form or as a compiled
+  binary, for any purpose, commercial or non-commercial, and by any
+  means.
+  In jurisdictions that recognize copyright laws, the author or authors
+  of this software dedicate any and all copyright interest in the
+  software to the public domain. We make this dedication for the benefit
+  of the public at large and to the detriment of our heirs and
+  successors. We intend this dedication to be an overt act of
+  relinquishment in perpetuity of all present and future rights to this
+  software under copyright law.
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+  IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+  OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+  ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+  OTHER DEALINGS IN THE SOFTWARE.
+  For more information, please refer to http://unlicense.org/
+*/
+export default class ImageTracer {
+  static tracerDefaultOption() {
+    return {
+      pathomit: 100,
+      ltres: 0.1,
+      qtres: 1,
+
+      scale: 1,
+      strokewidth: 5,
+      viewbox: false,
+      linefilter: true,
+      desc: false,
+      rightangleenhance: false,
+      pal: [
+        {
+          r: 0,
+          g: 0,
+          b: 0,
+          a: 255,
+        },
+        {
+          r: 255,
+          g: 255,
+          b: 255,
+          a: 255,
+        },
+      ],
+    };
+  }
+  /* eslint-disable */
+  constructor() {
+    this.versionnumber = '1.2.4';
+    this.optionpresets = {
+      default: {
+        corsenabled: false,
+        ltres: 1,
+        qtres: 1,
+        pathomit: 8,
+        rightangleenhance: true,
+        colorsampling: 2,
+        numberofcolors: 16,
+        mincolorratio: 0,
+        colorquantcycles: 3,
+        layering: 0,
+        strokewidth: 1,
+        linefilter: false,
+        scale: 1,
+        roundcoords: 1,
+        viewbox: false,
+        desc: false,
+        lcpr: 0,
+        qcpr: 0,
+        blurradius: 0,
+        blurdelta: 20,
+      },
+      posterized1: {
+        colorsampling: 0,
+        numberofcolors: 2,
+      },
+      posterized2: {
+        numberofcolors: 4,
+        blurradius: 5,
+      },
+      curvy: {
+        ltres: 0.01,
+        linefilter: true,
+        rightangleenhance: false,
+      },
+      sharp: { qtres: 0.01, linefilter: false },
+      detailed: { pathomit: 0, roundcoords: 2, ltres: 0.5, qtres: 0.5, numberofcolors: 64 },
+      smoothed: { blurradius: 5, blurdelta: 64 },
+      grayscale: { colorsampling: 0, colorquantcycles: 1, numberofcolors: 7 },
+      fixedpalette: { colorsampling: 0, colorquantcycles: 1, numberofcolors: 27 },
+      randomsampling1: { colorsampling: 1, numberofcolors: 8 },
+      randomsampling2: { colorsampling: 1, numberofcolors: 64 },
+      artistic1: {
+        colorsampling: 0,
+        colorquantcycles: 1,
+        pathomit: 0,
+        blurradius: 5,
+        blurdelta: 64,
+        ltres: 0.01,
+        linefilter: true,
+        numberofcolors: 16,
+        strokewidth: 2,
+      },
+      artistic2: {
+        qtres: 0.01,
+        colorsampling: 0,
+        colorquantcycles: 1,
+        numberofcolors: 4,
+        strokewidth: 0,
+      },
+      artistic3: { qtres: 10, ltres: 10, numberofcolors: 8 },
+      artistic4: {
+        qtres: 10,
+        ltres: 10,
+        numberofcolors: 64,
+        blurradius: 5,
+        blurdelta: 256,
+        strokewidth: 2,
+      },
+      posterized3: {
+        ltres: 1,
+        qtres: 1,
+        pathomit: 20,
+        rightangleenhance: true,
+        colorsampling: 0,
+        numberofcolors: 3,
+        mincolorratio: 0,
+        colorquantcycles: 3,
+        blurradius: 3,
+        blurdelta: 20,
+        strokewidth: 0,
+        linefilter: false,
+        roundcoords: 1,
+        pal: [
+          { r: 0, g: 0, b: 100, a: 255 },
+          { r: 255, g: 255, b: 255, a: 255 },
+        ],
+      },
+    };
+
+    this.pathscan_combined_lookup = [
+      [
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+      ],
+      [
+        [0, 1, 0, -1],
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+        [0, 2, -1, 0],
+      ],
+      [
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+        [0, 1, 0, -1],
+        [0, 0, 1, 0],
+      ],
+      [
+        [0, 0, 1, 0],
+        [-1, -1, -1, -1],
+        [0, 2, -1, 0],
+        [-1, -1, -1, -1],
+      ],
+      [
+        [-1, -1, -1, -1],
+        [0, 0, 1, 0],
+        [0, 3, 0, 1],
+        [-1, -1, -1, -1],
+      ],
+      [
+        [13, 3, 0, 1],
+        [13, 2, -1, 0],
+        [7, 1, 0, -1],
+        [7, 0, 1, 0],
+      ],
+      [
+        [-1, -1, -1, -1],
+        [0, 1, 0, -1],
+        [-1, -1, -1, -1],
+        [0, 3, 0, 1],
+      ],
+      [
+        [0, 3, 0, 1],
+        [0, 2, -1, 0],
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+      ],
+      [
+        [0, 3, 0, 1],
+        [0, 2, -1, 0],
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+      ],
+      [
+        [-1, -1, -1, -1],
+        [0, 1, 0, -1],
+        [-1, -1, -1, -1],
+        [0, 3, 0, 1],
+      ],
+      [
+        [11, 1, 0, -1],
+        [14, 0, 1, 0],
+        [14, 3, 0, 1],
+        [11, 2, -1, 0],
+      ],
+      [
+        [-1, -1, -1, -1],
+        [0, 0, 1, 0],
+        [0, 3, 0, 1],
+        [-1, -1, -1, -1],
+      ],
+      [
+        [0, 0, 1, 0],
+        [-1, -1, -1, -1],
+        [0, 2, -1, 0],
+        [-1, -1, -1, -1],
+      ],
+      [
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+        [0, 1, 0, -1],
+        [0, 0, 1, 0],
+      ],
+      [
+        [0, 1, 0, -1],
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+        [0, 2, -1, 0],
+      ],
+      [
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+        [-1, -1, -1, -1],
+      ],
+    ];
+
+    this.gks = [
+      [0.27901, 0.44198, 0.27901],
+      [0.135336, 0.228569, 0.272192, 0.228569, 0.135336],
+      [0.086776, 0.136394, 0.178908, 0.195843, 0.178908, 0.136394, 0.086776],
+      [0.063327, 0.093095, 0.122589, 0.144599, 0.152781, 0.144599, 0.122589, 0.093095, 0.063327],
+      [
+        0.049692,
+        0.069304,
+        0.089767,
+        0.107988,
+        0.120651,
+        0.125194,
+        0.120651,
+        0.107988,
+        0.089767,
+        0.069304,
+        0.049692,
+      ],
+    ];
+
+    this.specpalette = [
+      { r: 0, g: 0, b: 0, a: 255 },
+      { r: 128, g: 128, b: 128, a: 255 },
+      { r: 0, g: 0, b: 128, a: 255 },
+      { r: 64, g: 64, b: 128, a: 255 },
+      { r: 192, g: 192, b: 192, a: 255 },
+      { r: 255, g: 255, b: 255, a: 255 },
+      { r: 128, g: 128, b: 192, a: 255 },
+      { r: 0, g: 0, b: 192, a: 255 },
+      { r: 128, g: 0, b: 0, a: 255 },
+      { r: 128, g: 64, b: 64, a: 255 },
+      { r: 128, g: 0, b: 128, a: 255 },
+      { r: 168, g: 168, b: 168, a: 255 },
+      { r: 192, g: 128, b: 128, a: 255 },
+      { r: 192, g: 0, b: 0, a: 255 },
+      { r: 255, g: 255, b: 255, a: 255 },
+      { r: 0, g: 128, b: 0, a: 255 },
+    ];
+  }
+
+  imageToSVG(url, callback, options) {
+    options = this.checkoptions(options);
+    this.loadImage(
+      url,
+      (canvas) => {
+        callback(this.imagedataToSVG(this.getImgdata(canvas), options));
+      },
+      options
+    );
+  }
+
+  imagedataToSVG(imgd, options) {
+    options = this.checkoptions(options);
+    const td = this.imagedataToTracedata(imgd, options);
+
+    return this.getsvgstring(td, options);
+  }
+
+  imageToTracedata(url, callback, options) {
+    options = this.checkoptions(options);
+    this.loadImage(
+      url,
+      (canvas) => {
+        callback(this.imagedataToTracedata(this.getImgdata(canvas), options));
+      },
+      options
+    );
+  }
+
+  imagedataToTracedata(imgd, options) {
+    options = this.checkoptions(options);
+    const ii = this.colorquantization(imgd, options);
+    let tracedata;
+    if (options.layering === 0) {
+      tracedata = {
+        layers: [],
+        palette: ii.palette,
+        width: ii.array[0].length - 2,
+        height: ii.array.length - 2,
+      };
+
+      for (let colornum = 0; colornum < ii.palette.length; colornum += 1) {
+        const tracedlayer = this.batchtracepaths(
+          this.internodes(
+            this.pathscan(this.layeringstep(ii, colornum), options.pathomit),
+            options
+          ),
+          options.ltres,
+          options.qtres
+        );
+        tracedata.layers.push(tracedlayer);
+      }
+    } else {
+      const ls = this.layering(ii);
+      if (options.layercontainerid) {
+        this.drawLayers(ls, this.specpalette, options.scale, options.layercontainerid);
+      }
+      const bps = this.batchpathscan(ls, options.pathomit);
+      const bis = this.batchinternodes(bps, options);
+      tracedata = {
+        layers: this.batchtracelayers(bis, options.ltres, options.qtres),
+        palette: ii.palette,
+        width: imgd.width,
+        height: imgd.height,
+      };
+    }
+
+    return tracedata;
+  }
+
+  checkoptions(options) {
+    options = options || {};
+    if (typeof options === 'string') {
+      options = options.toLowerCase();
+      if (this.optionpresets[options]) {
+        options = this.optionpresets[options];
+      } else {
+        options = {};
+      }
+    }
+    const ok = Object.keys(this.optionpresets['default']);
+    for (let k = 0; k < ok.length; k += 1) {
+      if (!options.hasOwnProperty(ok[k])) {
+        options[ok[k]] = this.optionpresets['default'][ok[k]];
+      }
+    }
+
+    return options;
+  }
+
+  colorquantization(imgd, options) {
+    const arr = [];
+    let idx = 0;
+    let cd;
+    let cdl;
+    let ci;
+    const paletteacc = [];
+    const pixelnum = imgd.width * imgd.height;
+    let i;
+    let j;
+    let k;
+    let cnt;
+    let palette;
+
+    for (j = 0; j < imgd.height + 2; j += 1) {
+      arr[j] = [];
+      for (i = 0; i < imgd.width + 2; i += 1) {
+        arr[j][i] = -1;
+      }
+    }
+    if (options.pal) {
+      palette = options.pal;
+    } else if (options.colorsampling === 0) {
+      palette = this.generatepalette(options.numberofcolors);
+    } else if (options.colorsampling === 1) {
+      palette = this.samplepalette(options.numberofcolors, imgd);
+    } else {
+      palette = this.samplepalette2(options.numberofcolors, imgd);
+    }
+    if (options.blurradius > 0) {
+      imgd = this.blur(imgd, options.blurradius, options.blurdelta);
+    }
+    for (cnt = 0; cnt < options.colorquantcycles; cnt += 1) {
+      if (cnt > 0) {
+        for (k = 0; k < palette.length; k += 1) {
+          if (paletteacc[k].n > 0) {
+            palette[k] = {
+              r: Math.floor(paletteacc[k].r / paletteacc[k].n),
+              g: Math.floor(paletteacc[k].g / paletteacc[k].n),
+              b: Math.floor(paletteacc[k].b / paletteacc[k].n),
+              a: Math.floor(paletteacc[k].a / paletteacc[k].n),
+            };
+          }
+
+          if (
+            paletteacc[k].n / pixelnum < options.mincolorratio &&
+            cnt < options.colorquantcycles - 1
+          ) {
+            palette[k] = {
+              r: Math.floor(Math.random() * 255),
+              g: Math.floor(Math.random() * 255),
+              b: Math.floor(Math.random() * 255),
+              a: Math.floor(Math.random() * 255),
+            };
+          }
+        }
+      }
+
+      for (i = 0; i < palette.length; i += 1) {
+        paletteacc[i] = { r: 0, g: 0, b: 0, a: 0, n: 0 };
+      }
+
+      for (j = 0; j < imgd.height; j += 1) {
+        for (i = 0; i < imgd.width; i += 1) {
+          idx = (j * imgd.width + i) * 4;
+
+          ci = 0;
+          cdl = 1024;
+          for (k = 0; k < palette.length; k += 1) {
+            cd =
+              Math.abs(palette[k].r - imgd.data[idx]) +
+              Math.abs(palette[k].g - imgd.data[idx + 1]) +
+              Math.abs(palette[k].b - imgd.data[idx + 2]) +
+              Math.abs(palette[k].a - imgd.data[idx + 3]);
+
+            if (cd < cdl) {
+              cdl = cd;
+              ci = k;
+            }
+          }
+
+          paletteacc[ci].r += imgd.data[idx];
+          paletteacc[ci].g += imgd.data[idx + 1];
+          paletteacc[ci].b += imgd.data[idx + 2];
+          paletteacc[ci].a += imgd.data[idx + 3];
+          paletteacc[ci].n += 1;
+
+          arr[j + 1][i + 1] = ci;
+        }
+      }
+    }
+
+    return { array: arr, palette };
+  }
+
+  samplepalette(numberofcolors, imgd) {
+    let idx;
+    const palette = [];
+    for (let i = 0; i < numberofcolors; i += 1) {
+      idx = Math.floor((Math.random() * imgd.data.length) / 4) * 4;
+      palette.push({
+        r: imgd.data[idx],
+        g: imgd.data[idx + 1],
+        b: imgd.data[idx + 2],
+        a: imgd.data[idx + 3],
+      });
+    }
+
+    return palette;
+  }
+
+  samplepalette2(numberofcolors, imgd) {
+    let idx;
+    const palette = [];
+    const ni = Math.ceil(Math.sqrt(numberofcolors));
+    const nj = Math.ceil(numberofcolors / ni);
+    const vx = imgd.width / (ni + 1);
+    const vy = imgd.height / (nj + 1);
+    for (let j = 0; j < nj; j += 1) {
+      for (let i = 0; i < ni; i += 1) {
+        if (palette.length === numberofcolors) {
+          break;
+        } else {
+          idx = Math.floor((j + 1) * vy * imgd.width + (i + 1) * vx) * 4;
+          palette.push({
+            r: imgd.data[idx],
+            g: imgd.data[idx + 1],
+            b: imgd.data[idx + 2],
+            a: imgd.data[idx + 3],
+          });
+        }
+      }
+    }
+
+    return palette;
+  }
+
+  generatepalette(numberofcolors) {
+    const palette = [];
+    let rcnt;
+    let gcnt;
+    let bcnt;
+    if (numberofcolors < 8) {
+      const graystep = Math.floor(255 / (numberofcolors - 1));
+      for (let i = 0; i < numberofcolors; i += 1) {
+        palette.push({ r: i * graystep, g: i * graystep, b: i * graystep, a: 255 });
+      }
+    } else {
+      const colorqnum = Math.floor(Math.pow(numberofcolors, 1 / 3));
+      const colorstep = Math.floor(255 / (colorqnum - 1));
+      const rndnum = numberofcolors - colorqnum * colorqnum * colorqnum;
+      for (rcnt = 0; rcnt < colorqnum; rcnt += 1) {
+        for (gcnt = 0; gcnt < colorqnum; gcnt += 1) {
+          for (bcnt = 0; bcnt < colorqnum; bcnt += 1) {
+            palette.push({ r: rcnt * colorstep, g: gcnt * colorstep, b: bcnt * colorstep, a: 255 });
+          }
+        }
+      }
+      for (rcnt = 0; rcnt < rndnum; rcnt += 1) {
+        palette.push({
+          r: Math.floor(Math.random() * 255),
+          g: Math.floor(Math.random() * 255),
+          b: Math.floor(Math.random() * 255),
+          a: Math.floor(Math.random() * 255),
+        });
+      }
+    }
+
+    return palette;
+  }
+
+  layering(ii) {
+    const layers = [];
+    let val = 0;
+    const ah = ii.array.length;
+    const aw = ii.array[0].length;
+    let n1;
+    let n2;
+    let n3;
+    let n4;
+    let n5;
+    let n6;
+    let n7;
+    let n8;
+    let i;
+    let j;
+    let k;
+    for (k = 0; k < ii.palette.length; k += 1) {
+      layers[k] = [];
+      for (j = 0; j < ah; j += 1) {
+        layers[k][j] = [];
+        for (i = 0; i < aw; i += 1) {
+          layers[k][j][i] = 0;
+        }
+      }
+    }
+    for (j = 1; j < ah - 1; j += 1) {
+      for (i = 1; i < aw - 1; i += 1) {
+        val = ii.array[j][i];
+
+        n1 = ii.array[j - 1][i - 1] === val ? 1 : 0;
+        n2 = ii.array[j - 1][i] === val ? 1 : 0;
+        n3 = ii.array[j - 1][i + 1] === val ? 1 : 0;
+        n4 = ii.array[j][i - 1] === val ? 1 : 0;
+        n5 = ii.array[j][i + 1] === val ? 1 : 0;
+        n6 = ii.array[j + 1][i - 1] === val ? 1 : 0;
+        n7 = ii.array[j + 1][i] === val ? 1 : 0;
+        n8 = ii.array[j + 1][i + 1] === val ? 1 : 0;
+
+        layers[val][j + 1][i + 1] = 1 + n5 * 2 + n8 * 4 + n7 * 8;
+        if (!n4) {
+          layers[val][j + 1][i] = 0 + 2 + n7 * 4 + n6 * 8;
+        }
+        if (!n2) {
+          layers[val][j][i + 1] = 0 + n3 * 2 + n5 * 4 + 8;
+        }
+        if (!n1) {
+          layers[val][j][i] = 0 + n2 * 2 + 4 + n4 * 8;
+        }
+      }
+    }
+
+    return layers;
+  }
+
+  layeringstep(ii, cnum) {
+    const layer = [];
+    const ah = ii.array.length;
+    const aw = ii.array[0].length;
+    let i;
+    let j;
+    for (j = 0; j < ah; j += 1) {
+      layer[j] = [];
+      for (i = 0; i < aw; i += 1) {
+        layer[j][i] = 0;
+      }
+    }
+    for (j = 1; j < ah; j += 1) {
+      for (i = 1; i < aw; i += 1) {
+        layer[j][i] =
+          (ii.array[j - 1][i - 1] === cnum ? 1 : 0) +
+          (ii.array[j - 1][i] === cnum ? 2 : 0) +
+          (ii.array[j][i - 1] === cnum ? 8 : 0) +
+          (ii.array[j][i] === cnum ? 4 : 0);
+      }
+    }
+
+    return layer;
+  }
+
+  pathscan(arr, pathomit) {
+    const paths = [];
+    let pacnt = 0;
+    let pcnt = 0;
+    let px = 0;
+    let py = 0;
+    const w = arr[0].length;
+    const h = arr.length;
+    let dir = 0;
+    let pathfinished = true;
+    let holepath = false;
+    let lookuprow;
+    for (let j = 0; j < h; j += 1) {
+      for (let i = 0; i < w; i += 1) {
+        if (arr[j][i] === 4 || arr[j][i] === 11) {
+          px = i;
+          py = j;
+          paths[pacnt] = {};
+          paths[pacnt].points = [];
+          paths[pacnt].boundingbox = [px, py, px, py];
+          paths[pacnt].holechildren = [];
+          pathfinished = false;
+          pcnt = 0;
+          holepath = arr[j][i] === 11;
+          dir = 1;
+
+          while (!pathfinished) {
+            paths[pacnt].points[pcnt] = {};
+            paths[pacnt].points[pcnt].x = px - 1;
+            paths[pacnt].points[pcnt].y = py - 1;
+            paths[pacnt].points[pcnt].t = arr[py][px];
+
+            if (px - 1 < paths[pacnt].boundingbox[0]) {
+              paths[pacnt].boundingbox[0] = px - 1;
+            }
+            if (px - 1 > paths[pacnt].boundingbox[2]) {
+              paths[pacnt].boundingbox[2] = px - 1;
+            }
+            if (py - 1 < paths[pacnt].boundingbox[1]) {
+              paths[pacnt].boundingbox[1] = py - 1;
+            }
+            if (py - 1 > paths[pacnt].boundingbox[3]) {
+              paths[pacnt].boundingbox[3] = py - 1;
+            }
+
+            lookuprow = this.pathscan_combined_lookup[arr[py][px]][dir];
+            arr[py][px] = lookuprow[0];
+            dir = lookuprow[1];
+            px += lookuprow[2];
+            py += lookuprow[3];
+
+            if (px - 1 === paths[pacnt].points[0].x && py - 1 === paths[pacnt].points[0].y) {
+              pathfinished = true;
+
+              if (paths[pacnt].points.length < pathomit) {
+                paths.pop();
+              } else {
+                paths[pacnt].isholepath = !!holepath;
+
+                if (holepath) {
+                  let parentidx = 0,
+                    parentbbox = [-1, -1, w + 1, h + 1];
+                  for (let parentcnt = 0; parentcnt < pacnt; parentcnt++) {
+                    if (
+                      !paths[parentcnt].isholepath &&
+                      this.boundingboxincludes(
+                        paths[parentcnt].boundingbox,
+                        paths[pacnt].boundingbox
+                      ) &&
+                      this.boundingboxincludes(parentbbox, paths[parentcnt].boundingbox)
+                    ) {
+                      parentidx = parentcnt;
+                      parentbbox = paths[parentcnt].boundingbox;
+                    }
+                  }
+                  paths[parentidx].holechildren.push(pacnt);
+                }
+                pacnt += 1;
+              }
+            }
+            pcnt += 1;
+          }
+        }
+      }
+    }
+
+    return paths;
+  }
+
+  boundingboxincludes(parentbbox, childbbox) {
+    return (
+      parentbbox[0] < childbbox[0] &&
+      parentbbox[1] < childbbox[1] &&
+      parentbbox[2] > childbbox[2] &&
+      parentbbox[3] > childbbox[3]
+    );
+  }
+
+  batchpathscan(layers, pathomit) {
+    const bpaths = [];
+    for (const k in layers) {
+      if (!layers.hasOwnProperty(k)) {
+        continue;
+      }
+      bpaths[k] = this.pathscan(layers[k], pathomit);
+    }
+
+    return bpaths;
+  }
+
+  internodes(paths, options) {
+    const ins = [];
+    let palen = 0;
+    let nextidx = 0;
+    let nextidx2 = 0;
+    let previdx = 0;
+    let previdx2 = 0;
+    let pacnt;
+    let pcnt;
+    for (pacnt = 0; pacnt < paths.length; pacnt += 1) {
+      ins[pacnt] = {};
+      ins[pacnt].points = [];
+      ins[pacnt].boundingbox = paths[pacnt].boundingbox;
+      ins[pacnt].holechildren = paths[pacnt].holechildren;
+      ins[pacnt].isholepath = paths[pacnt].isholepath;
+      palen = paths[pacnt].points.length;
+
+      for (pcnt = 0; pcnt < palen; pcnt += 1) {
+        nextidx = (pcnt + 1) % palen;
+        nextidx2 = (pcnt + 2) % palen;
+        previdx = (pcnt - 1 + palen) % palen;
+        previdx2 = (pcnt - 2 + palen) % palen;
+
+        if (
+          options.rightangleenhance &&
+          this.testrightangle(paths[pacnt], previdx2, previdx, pcnt, nextidx, nextidx2)
+        ) {
+          if (ins[pacnt].points.length > 0) {
+            ins[pacnt].points[ins[pacnt].points.length - 1].linesegment = this.getdirection(
+              ins[pacnt].points[ins[pacnt].points.length - 1].x,
+              ins[pacnt].points[ins[pacnt].points.length - 1].y,
+              paths[pacnt].points[pcnt].x,
+              paths[pacnt].points[pcnt].y
+            );
+          }
+
+          ins[pacnt].points.push({
+            x: paths[pacnt].points[pcnt].x,
+            y: paths[pacnt].points[pcnt].y,
+            linesegment: this.getdirection(
+              paths[pacnt].points[pcnt].x,
+              paths[pacnt].points[pcnt].y,
+              (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,
+              (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2
+            ),
+          });
+        }
+
+        ins[pacnt].points.push({
+          x: (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,
+          y: (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2,
+          linesegment: this.getdirection(
+            (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,
+            (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2,
+            (paths[pacnt].points[nextidx].x + paths[pacnt].points[nextidx2].x) / 2,
+            (paths[pacnt].points[nextidx].y + paths[pacnt].points[nextidx2].y) / 2
+          ),
+        });
+      }
+    }
+
+    return ins;
+  }
+
+  testrightangle(path, idx1, idx2, idx3, idx4, idx5) {
+    return (
+      (path.points[idx3].x === path.points[idx1].x &&
+        path.points[idx3].x === path.points[idx2].x &&
+        path.points[idx3].y === path.points[idx4].y &&
+        path.points[idx3].y === path.points[idx5].y) ||
+      (path.points[idx3].y === path.points[idx1].y &&
+        path.points[idx3].y === path.points[idx2].y &&
+        path.points[idx3].x === path.points[idx4].x &&
+        path.points[idx3].x === path.points[idx5].x)
+    );
+  }
+
+  getdirection(x1, y1, x2, y2) {
+    let val = 8;
+    if (x1 < x2) {
+      if (y1 < y2) {
+        val = 1;
+      } else if (y1 > y2) {
+        val = 7;
+      } else {
+        val = 0;
+      }
+    } else if (x1 > x2) {
+      if (y1 < y2) {
+        val = 3;
+      } else if (y1 > y2) {
+        val = 5;
+      } else {
+        val = 4;
+      }
+    } else if (y1 < y2) {
+      val = 2;
+    } else if (y1 > y2) {
+      val = 6;
+    } else {
+      val = 8;
+    }
+
+    return val;
+  }
+
+  batchinternodes(bpaths, options) {
+    const binternodes = [];
+    for (const k in bpaths) {
+      if (!bpaths.hasOwnProperty(k)) {
+        continue;
+      }
+      binternodes[k] = this.internodes(bpaths[k], options);
+    }
+
+    return binternodes;
+  }
+
+  tracepath(path, ltres, qtres) {
+    let pcnt = 0;
+    let segtype1;
+    let segtype2;
+    let seqend;
+    const smp = {};
+    smp.segments = [];
+    smp.boundingbox = path.boundingbox;
+    smp.holechildren = path.holechildren;
+    smp.isholepath = path.isholepath;
+
+    while (pcnt < path.points.length) {
+      segtype1 = path.points[pcnt].linesegment;
+      segtype2 = -1;
+      seqend = pcnt + 1;
+      while (
+        (path.points[seqend].linesegment === segtype1 ||
+          path.points[seqend].linesegment === segtype2 ||
+          segtype2 === -1) &&
+        seqend < path.points.length - 1
+      ) {
+        if (path.points[seqend].linesegment !== segtype1 && segtype2 === -1) {
+          segtype2 = path.points[seqend].linesegment;
+        }
+        seqend += 1;
+      }
+      if (seqend === path.points.length - 1) {
+        seqend = 0;
+      }
+
+      smp.segments = smp.segments.concat(this.fitseq(path, ltres, qtres, pcnt, seqend));
+
+      if (seqend > 0) {
+        pcnt = seqend;
+      } else {
+        pcnt = path.points.length;
+      }
+    }
+
+    return smp;
+  }
+
+  fitseq(path, ltres, qtres, seqstart, seqend) {
+    if (seqend > path.points.length || seqend < 0) {
+      return [];
+    }
+    let errorpoint = seqstart,
+      errorval = 0,
+      curvepass = true,
+      px,
+      py,
+      dist2;
+    let tl = seqend - seqstart;
+    if (tl < 0) {
+      tl += path.points.length;
+    }
+    let vx = (path.points[seqend].x - path.points[seqstart].x) / tl,
+      vy = (path.points[seqend].y - path.points[seqstart].y) / tl;
+    let pcnt = (seqstart + 1) % path.points.length,
+      pl;
+    while (pcnt != seqend) {
+      pl = pcnt - seqstart;
+      if (pl < 0) {
+        pl += path.points.length;
+      }
+      px = path.points[seqstart].x + vx * pl;
+      py = path.points[seqstart].y + vy * pl;
+      dist2 =
+        (path.points[pcnt].x - px) * (path.points[pcnt].x - px) +
+        (path.points[pcnt].y - py) * (path.points[pcnt].y - py);
+      if (dist2 > ltres) {
+        curvepass = false;
+      }
+      if (dist2 > errorval) {
+        errorpoint = pcnt;
+        errorval = dist2;
+      }
+      pcnt = (pcnt + 1) % path.points.length;
+    }
+    if (curvepass) {
+      return [
+        {
+          type: 'L',
+          x1: path.points[seqstart].x,
+          y1: path.points[seqstart].y,
+          x2: path.points[seqend].x,
+          y2: path.points[seqend].y,
+        },
+      ];
+    }
+    const fitpoint = errorpoint;
+    curvepass = true;
+    errorval = 0;
+    let t = (fitpoint - seqstart) / tl,
+      t1 = (1 - t) * (1 - t),
+      t2 = 2 * (1 - t) * t,
+      t3 = t * t;
+    let cpx =
+        (t1 * path.points[seqstart].x + t3 * path.points[seqend].x - path.points[fitpoint].x) / -t2,
+      cpy =
+        (t1 * path.points[seqstart].y + t3 * path.points[seqend].y - path.points[fitpoint].y) / -t2;
+    pcnt = seqstart + 1;
+    while (pcnt != seqend) {
+      t = (pcnt - seqstart) / tl;
+      t1 = (1 - t) * (1 - t);
+      t2 = 2 * (1 - t) * t;
+      t3 = t * t;
+      px = t1 * path.points[seqstart].x + t2 * cpx + t3 * path.points[seqend].x;
+      py = t1 * path.points[seqstart].y + t2 * cpy + t3 * path.points[seqend].y;
+      dist2 =
+        (path.points[pcnt].x - px) * (path.points[pcnt].x - px) +
+        (path.points[pcnt].y - py) * (path.points[pcnt].y - py);
+      if (dist2 > qtres) {
+        curvepass = false;
+      }
+      if (dist2 > errorval) {
+        errorpoint = pcnt;
+        errorval = dist2;
+      }
+      pcnt = (pcnt + 1) % path.points.length;
+    }
+    if (curvepass) {
+      return [
+        {
+          type: 'Q',
+          x1: path.points[seqstart].x,
+          y1: path.points[seqstart].y,
+          x2: cpx,
+          y2: cpy,
+          x3: path.points[seqend].x,
+          y3: path.points[seqend].y,
+        },
+      ];
+    }
+    const splitpoint = fitpoint;
+
+    return this.fitseq(path, ltres, qtres, seqstart, splitpoint).concat(
+      this.fitseq(path, ltres, qtres, splitpoint, seqend)
+    );
+  }
+
+  batchtracepaths(internodepaths, ltres, qtres) {
+    const btracedpaths = [];
+    for (const k in internodepaths) {
+      if (!internodepaths.hasOwnProperty(k)) {
+        continue;
+      }
+      btracedpaths.push(this.tracepath(internodepaths[k], ltres, qtres));
+    }
+
+    return btracedpaths;
+  }
+
+  batchtracelayers(binternodes, ltres, qtres) {
+    const btbis = [];
+    for (const k in binternodes) {
+      if (!binternodes.hasOwnProperty(k)) {
+        continue;
+      }
+      btbis[k] = this.batchtracepaths(binternodes[k], ltres, qtres);
+    }
+
+    return btbis;
+  }
+
+  roundtodec(val, places) {
+    return Number(val.toFixed(places));
+  }
+
+  svgpathstring(tracedata, lnum, pathnum, options) {
+    let layer = tracedata.layers[lnum],
+      smp = layer[pathnum],
+      str = '',
+      pcnt;
+    if (options.linefilter && smp.segments.length < 3) {
+      return str;
+    }
+    str = `<path ${options.desc ? `desc="l ${lnum} p ${pathnum}" ` : ''}${this.tosvgcolorstr(
+      tracedata.palette[lnum],
+      options
+    )}d="`;
+    if (options.roundcoords === -1) {
+      str += `M ${smp.segments[0].x1 * options.scale} ${smp.segments[0].y1 * options.scale} `;
+      for (pcnt = 0; pcnt < smp.segments.length; pcnt++) {
+        str += `${smp.segments[pcnt].type} ${smp.segments[pcnt].x2 * options.scale} ${
+          smp.segments[pcnt].y2 * options.scale
+        } `;
+        if (smp.segments[pcnt].hasOwnProperty('x3')) {
+          str += `${smp.segments[pcnt].x3 * options.scale} ${
+            smp.segments[pcnt].y3 * options.scale
+          } `;
+        }
+      }
+      str += 'Z ';
+    } else {
+      str += `M ${this.roundtodec(
+        smp.segments[0].x1 * options.scale,
+        options.roundcoords
+      )} ${this.roundtodec(smp.segments[0].y1 * options.scale, options.roundcoords)} `;
+      for (pcnt = 0; pcnt < smp.segments.length; pcnt++) {
+        str += `${smp.segments[pcnt].type} ${this.roundtodec(
+          smp.segments[pcnt].x2 * options.scale,
+          options.roundcoords
+        )} ${this.roundtodec(smp.segments[pcnt].y2 * options.scale, options.roundcoords)} `;
+        if (smp.segments[pcnt].hasOwnProperty('x3')) {
+          str += `${this.roundtodec(
+            smp.segments[pcnt].x3 * options.scale,
+            options.roundcoords
+          )} ${this.roundtodec(smp.segments[pcnt].y3 * options.scale, options.roundcoords)} `;
+        }
+      }
+      str += 'Z ';
+    }
+    for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) {
+      var hsmp = layer[smp.holechildren[hcnt]];
+
+      if (options.roundcoords === -1) {
+        if (hsmp.segments[hsmp.segments.length - 1].hasOwnProperty('x3')) {
+          str += `M ${hsmp.segments[hsmp.segments.length - 1].x3 * options.scale} ${
+            hsmp.segments[hsmp.segments.length - 1].y3 * options.scale
+          } `;
+        } else {
+          str += `M ${hsmp.segments[hsmp.segments.length - 1].x2 * options.scale} ${
+            hsmp.segments[hsmp.segments.length - 1].y2 * options.scale
+          } `;
+        }
+        for (pcnt = hsmp.segments.length - 1; pcnt >= 0; pcnt--) {
+          str += `${hsmp.segments[pcnt].type} `;
+          if (hsmp.segments[pcnt].hasOwnProperty('x3')) {
+            str += `${hsmp.segments[pcnt].x2 * options.scale} ${
+              hsmp.segments[pcnt].y2 * options.scale
+            } `;
+          }
+          str += `${hsmp.segments[pcnt].x1 * options.scale} ${
+            hsmp.segments[pcnt].y1 * options.scale
+          } `;
+        }
+      } else {
+        if (hsmp.segments[hsmp.segments.length - 1].hasOwnProperty('x3')) {
+          str += `M ${this.roundtodec(
+            hsmp.segments[hsmp.segments.length - 1].x3 * options.scale
+          )} ${this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y3 * options.scale)} `;
+        } else {
+          str += `M ${this.roundtodec(
+            hsmp.segments[hsmp.segments.length - 1].x2 * options.scale
+          )} ${this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y2 * options.scale)} `;
+        }
+        for (pcnt = hsmp.segments.length - 1; pcnt >= 0; pcnt--) {
+          str += `${hsmp.segments[pcnt].type} `;
+          if (hsmp.segments[pcnt].hasOwnProperty('x3')) {
+            str += `${this.roundtodec(hsmp.segments[pcnt].x2 * options.scale)} ${this.roundtodec(
+              hsmp.segments[pcnt].y2 * options.scale
+            )} `;
+          }
+          str += `${this.roundtodec(hsmp.segments[pcnt].x1 * options.scale)} ${this.roundtodec(
+            hsmp.segments[pcnt].y1 * options.scale
+          )} `;
+        }
+      }
+      str += 'Z ';
+    }
+    str += '" />';
+    if (options.lcpr || options.qcpr) {
+      for (pcnt = 0; pcnt < smp.segments.length; pcnt++) {
+        if (smp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) {
+          str += `<circle cx="${smp.segments[pcnt].x2 * options.scale}" cy="${
+            smp.segments[pcnt].y2 * options.scale
+          }" r="${options.qcpr}" fill="cyan" stroke-width="${
+            options.qcpr * 0.2
+          }" stroke="black" />`;
+          str += `<circle cx="${smp.segments[pcnt].x3 * options.scale}" cy="${
+            smp.segments[pcnt].y3 * options.scale
+          }" r="${options.qcpr}" fill="white" stroke-width="${
+            options.qcpr * 0.2
+          }" stroke="black" />`;
+          str += `<line x1="${smp.segments[pcnt].x1 * options.scale}" y1="${
+            smp.segments[pcnt].y1 * options.scale
+          }" x2="${smp.segments[pcnt].x2 * options.scale}" y2="${
+            smp.segments[pcnt].y2 * options.scale
+          }" stroke-width="${options.qcpr * 0.2}" stroke="cyan" />`;
+          str += `<line x1="${smp.segments[pcnt].x2 * options.scale}" y1="${
+            smp.segments[pcnt].y2 * options.scale
+          }" x2="${smp.segments[pcnt].x3 * options.scale}" y2="${
+            smp.segments[pcnt].y3 * options.scale
+          }" stroke-width="${options.qcpr * 0.2}" stroke="cyan" />`;
+        }
+        if (!smp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) {
+          str += `<circle cx="${smp.segments[pcnt].x2 * options.scale}" cy="${
+            smp.segments[pcnt].y2 * options.scale
+          }" r="${options.lcpr}" fill="white" stroke-width="${
+            options.lcpr * 0.2
+          }" stroke="black" />`;
+        }
+      }
+
+      for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) {
+        var hsmp = layer[smp.holechildren[hcnt]];
+        for (pcnt = 0; pcnt < hsmp.segments.length; pcnt++) {
+          if (hsmp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) {
+            str += `<circle cx="${hsmp.segments[pcnt].x2 * options.scale}" cy="${
+              hsmp.segments[pcnt].y2 * options.scale
+            }" r="${options.qcpr}" fill="cyan" stroke-width="${
+              options.qcpr * 0.2
+            }" stroke="black" />`;
+            str += `<circle cx="${hsmp.segments[pcnt].x3 * options.scale}" cy="${
+              hsmp.segments[pcnt].y3 * options.scale
+            }" r="${options.qcpr}" fill="white" stroke-width="${
+              options.qcpr * 0.2
+            }" stroke="black" />`;
+            str += `<line x1="${hsmp.segments[pcnt].x1 * options.scale}" y1="${
+              hsmp.segments[pcnt].y1 * options.scale
+            }" x2="${hsmp.segments[pcnt].x2 * options.scale}" y2="${
+              hsmp.segments[pcnt].y2 * options.scale
+            }" stroke-width="${options.qcpr * 0.2}" stroke="cyan" />`;
+            str += `<line x1="${hsmp.segments[pcnt].x2 * options.scale}" y1="${
+              hsmp.segments[pcnt].y2 * options.scale
+            }" x2="${hsmp.segments[pcnt].x3 * options.scale}" y2="${
+              hsmp.segments[pcnt].y3 * options.scale
+            }" stroke-width="${options.qcpr * 0.2}" stroke="cyan" />`;
+          }
+          if (!hsmp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) {
+            str += `<circle cx="${hsmp.segments[pcnt].x2 * options.scale}" cy="${
+              hsmp.segments[pcnt].y2 * options.scale
+            }" r="${options.lcpr}" fill="white" stroke-width="${
+              options.lcpr * 0.2
+            }" stroke="black" />`;
+          }
+        }
+      }
+    }
+
+    return str;
+  }
+
+  getsvgstring(tracedata, options) {
+    options = this.checkoptions(options);
+    const w = tracedata.width * options.scale;
+    const h = tracedata.height * options.scale;
+
+    let svgstr = `<svg ${
+      options.viewbox ? `viewBox="0 0 ${w} ${h}" ` : `width="${w}" height="${h}" `
+    }version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version ${
+      this.versionnumber
+    }" >`;
+    for (let lcnt = 0; lcnt < tracedata.layers.length; lcnt += 1) {
+      for (let pcnt = 0; pcnt < tracedata.layers[lcnt].length; pcnt += 1) {
+        if (!tracedata.layers[lcnt][pcnt].isholepath) {
+          svgstr += this.svgpathstring(tracedata, lcnt, pcnt, options);
+        }
+      }
+    }
+    svgstr += '</svg>';
+
+    return svgstr;
+  }
+
+  compareNumbers(a, b) {
+    return a - b;
+  }
+
+  torgbastr(c) {
+    return `rgba(${c.r},${c.g},${c.b},${c.a})`;
+  }
+
+  tosvgcolorstr(c, options) {
+    return `fill="rgb(${c.r},${c.g},${c.b})" stroke="rgb(${c.r},${c.g},${c.b})" stroke-width="${
+      options.strokewidth
+    }" opacity="${c.a / 255.0}" `;
+  }
+
+  appendSVGString(svgstr, parentid) {
+    let div;
+    if (parentid) {
+      div = document.getElementById(parentid);
+      if (!div) {
+        div = document.createElement('div');
+        div.id = parentid;
+        document.body.appendChild(div);
+      }
+    } else {
+      div = document.createElement('div');
+      document.body.appendChild(div);
+    }
+    div.innerHTML += svgstr;
+  }
+
+  blur(imgd, radius, delta) {
+    let i, j, k, d, idx, racc, gacc, bacc, aacc, wacc;
+    const imgd2 = { width: imgd.width, height: imgd.height, data: [] };
+    radius = Math.floor(radius);
+    if (radius < 1) {
+      return imgd;
+    }
+    if (radius > 5) {
+      radius = 5;
+    }
+    delta = Math.abs(delta);
+    if (delta > 1024) {
+      delta = 1024;
+    }
+    const thisgk = this.gks[radius - 1];
+    for (j = 0; j < imgd.height; j++) {
+      for (i = 0; i < imgd.width; i++) {
+        racc = 0;
+        gacc = 0;
+        bacc = 0;
+        aacc = 0;
+        wacc = 0;
+
+        for (k = -radius; k < radius + 1; k++) {
+          if (i + k > 0 && i + k < imgd.width) {
+            idx = (j * imgd.width + i + k) * 4;
+            racc += imgd.data[idx] * thisgk[k + radius];
+            gacc += imgd.data[idx + 1] * thisgk[k + radius];
+            bacc += imgd.data[idx + 2] * thisgk[k + radius];
+            aacc += imgd.data[idx + 3] * thisgk[k + radius];
+            wacc += thisgk[k + radius];
+          }
+        }
+
+        idx = (j * imgd.width + i) * 4;
+        imgd2.data[idx] = Math.floor(racc / wacc);
+        imgd2.data[idx + 1] = Math.floor(gacc / wacc);
+        imgd2.data[idx + 2] = Math.floor(bacc / wacc);
+        imgd2.data[idx + 3] = Math.floor(aacc / wacc);
+      }
+    }
+    const himgd = new Uint8ClampedArray(imgd2.data);
+    for (j = 0; j < imgd.height; j++) {
+      for (i = 0; i < imgd.width; i++) {
+        racc = 0;
+        gacc = 0;
+        bacc = 0;
+        aacc = 0;
+        wacc = 0;
+
+        for (k = -radius; k < radius + 1; k++) {
+          if (j + k > 0 && j + k < imgd.height) {
+            idx = ((j + k) * imgd.width + i) * 4;
+            racc += himgd[idx] * thisgk[k + radius];
+            gacc += himgd[idx + 1] * thisgk[k + radius];
+            bacc += himgd[idx + 2] * thisgk[k + radius];
+            aacc += himgd[idx + 3] * thisgk[k + radius];
+            wacc += thisgk[k + radius];
+          }
+        }
+
+        idx = (j * imgd.width + i) * 4;
+        imgd2.data[idx] = Math.floor(racc / wacc);
+        imgd2.data[idx + 1] = Math.floor(gacc / wacc);
+        imgd2.data[idx + 2] = Math.floor(bacc / wacc);
+        imgd2.data[idx + 3] = Math.floor(aacc / wacc);
+      }
+    }
+    for (j = 0; j < imgd.height; j++) {
+      for (i = 0; i < imgd.width; i++) {
+        idx = (j * imgd.width + i) * 4;
+
+        d =
+          Math.abs(imgd2.data[idx] - imgd.data[idx]) +
+          Math.abs(imgd2.data[idx + 1] - imgd.data[idx + 1]) +
+          Math.abs(imgd2.data[idx + 2] - imgd.data[idx + 2]) +
+          Math.abs(imgd2.data[idx + 3] - imgd.data[idx + 3]);
+
+        if (d > delta) {
+          imgd2.data[idx] = imgd.data[idx];
+          imgd2.data[idx + 1] = imgd.data[idx + 1];
+          imgd2.data[idx + 2] = imgd.data[idx + 2];
+          imgd2.data[idx + 3] = imgd.data[idx + 3];
+        }
+      }
+    }
+
+    return imgd2;
+  }
+
+  loadImage(url, callback, options) {
+    const img = new Image();
+    if (options && options.corsenabled) {
+      img.crossOrigin = 'Anonymous';
+    }
+    img.src = url;
+    img.onload = function () {
+      const canvas = document.createElement('canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const context = canvas.getContext('2d');
+      context.drawImage(img, 0, 0);
+      callback(canvas);
+    };
+  }
+
+  getImgdata(canvas) {
+    const context = canvas.getContext('2d');
+
+    return context.getImageData(0, 0, canvas.width, canvas.height);
+  }
+
+  drawLayers(layers, palette, scale, parentid) {
+    scale = scale || 1;
+    let w, h, i, j, k;
+    let div;
+    if (parentid) {
+      div = document.getElementById(parentid);
+      if (!div) {
+        div = document.createElement('div');
+        div.id = parentid;
+        document.body.appendChild(div);
+      }
+    } else {
+      div = document.createElement('div');
+      document.body.appendChild(div);
+    }
+    for (k in layers) {
+      if (!layers.hasOwnProperty(k)) {
+        continue;
+      }
+
+      w = layers[k][0].length;
+      h = layers[k].length;
+
+      const canvas = document.createElement('canvas');
+      canvas.width = w * scale;
+      canvas.height = h * scale;
+      const context = canvas.getContext('2d');
+
+      for (j = 0; j < h; j += 1) {
+        for (i = 0; i < w; i += 1) {
+          context.fillStyle = this.torgbastr(palette[layers[k][j][i] % palette.length]);
+          context.fillRect(i * scale, j * scale, scale, scale);
+        }
+      }
+
+      div.appendChild(canvas);
+    }
+  }
+}