modules/png_support.js

  1. /**
  2.  * @license
  3.  *
  4.  * Copyright (c) 2014 James Robb, https://github.com/jamesbrobb
  5.  *
  6.  * Permission is hereby granted, free of charge, to any person obtaining
  7.  * a copy of this software and associated documentation files (the
  8.  * "Software"), to deal in the Software without restriction, including
  9.  * without limitation the rights to use, copy, modify, merge, publish,
  10.  * distribute, sublicense, and/or sell copies of the Software, and to
  11.  * permit persons to whom the Software is furnished to do so, subject to
  12.  * the following conditions:
  13.  *
  14.  * The above copyright notice and this permission notice shall be
  15.  * included in all copies or substantial portions of the Software.
  16.  *
  17.  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  18.  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  19.  * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  20.  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  21.  * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  22.  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  23.  * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  24.  * ====================================================================
  25.  */
  27. import { jsPDF } from "../jspdf.js";
  28. import { zlibSync } from "../libs/fflate.js";
  29. import { PNG } from "../libs/png.js";
  31. /**
  32.  * jsPDF PNG PlugIn
  33.  * @name png_support
  34.  * @module
  35.  */
  36. (function(jsPDFAPI) {
  37.   "use strict";
  39.   /*
  40.    * @see http://www.w3.org/TR/PNG-Chunks.html
  41.    *
  42.    Color    Allowed      Interpretation
  43.    Type     Bit Depths
  45.      0       1,2,4,8,16  Each pixel is a grayscale sample.
  47.      2       8,16        Each pixel is an R,G,B triple.
  49.      3       1,2,4,8     Each pixel is a palette index;
  50.                          a PLTE chunk must appear.
  52.      4       8,16        Each pixel is a grayscale sample,
  53.                          followed by an alpha sample.
  55.      6       8,16        Each pixel is an R,G,B triple,
  56.                          followed by an alpha sample.
  57.   */
  59.   /*
  60.    * PNG filter method types
  61.    *
  62.    * @see http://www.w3.org/TR/PNG-Filters.html
  63.    * @see http://www.libpng.org/pub/png/book/chapter09.html
  64.    *
  65.    * This is what the value 'Predictor' in decode params relates to
  66.    *
  67.    * 15 is "optimal prediction", which means the prediction algorithm can change from line to line.
  68.    * In that case, you actually have to read the first byte off each line for the prediction algorthim (which should be 0-4, corresponding to PDF 10-14) and select the appropriate unprediction algorithm based on that byte.
  69.    *
  70.      0       None
  71.      1       Sub
  72.      2       Up
  73.      3       Average
  74.      4       Paeth
  75.    */
  77.   var canCompress = function(value) {
  78.     return value !== jsPDFAPI.image_compression.NONE && hasCompressionJS();
  79.   };
  81.   var hasCompressionJS = function() {
  82.     return typeof zlibSync === "function";
  83.   };
  84.   var compressBytes = function(bytes, lineLength, colorsPerPixel, compression) {
  85.     var level = 4;
  86.     var filter_method = filterUp;
  88.     switch (compression) {
  89.       case jsPDFAPI.image_compression.FAST:
  90.         level = 1;
  91.         filter_method = filterSub;
  92.         break;
  94.       case jsPDFAPI.image_compression.MEDIUM:
  95.         level = 6;
  96.         filter_method = filterAverage;
  97.         break;
  99.       case jsPDFAPI.image_compression.SLOW:
  100.         level = 9;
  101.         filter_method = filterPaeth;
  102.         break;
  103.     }
  105.     bytes = applyPngFilterMethod(
  106.       bytes,
  107.       lineLength,
  108.       colorsPerPixel,
  109.       filter_method
  110.     );
  111.     var dat = zlibSync(bytes, { level: level });
  112.     return jsPDFAPI.__addimage__.arrayBufferToBinaryString(dat);
  113.   };
  115.   var applyPngFilterMethod = function(
  116.     bytes,
  117.     lineLength,
  118.     colorsPerPixel,
  119.     filter_method
  120.   ) {
  121.     var lines = bytes.length / lineLength,
  122.       result = new Uint8Array(bytes.length + lines),
  123.       filter_methods = getFilterMethods(),
  124.       line,
  125.       prevLine,
  126.       offset;
  128.     for (var i = 0; i < lines; i += 1) {
  129.       offset = i * lineLength;
  130.       line = bytes.subarray(offset, offset + lineLength);
  132.       if (filter_method) {
  133.         result.set(filter_method(line, colorsPerPixel, prevLine), offset + i);
  134.       } else {
  135.         var len = filter_methods.length,
  136.           results = [];
  138.         for (var j; j < len; j += 1) {
  139.           results[j] = filter_methods[j](line, colorsPerPixel, prevLine);
  140.         }
  142.         var ind = getIndexOfSmallestSum(results.concat());
  144.         result.set(results[ind], offset + i);
  145.       }
  147.       prevLine = line;
  148.     }
  150.     return result;
  151.   };
  153.   var filterNone = function(line) {
  154.     /*var result = new Uint8Array(line.length + 1);
  155.     result[0] = 0;
  156.     result.set(line, 1);*/
  158.     var result = Array.apply([], line);
  159.     result.unshift(0);
  161.     return result;
  162.   };
  164.   var filterSub = function(line, colorsPerPixel) {
  165.     var result = [],
  166.       len = line.length,
  167.       left;
  169.     result[0] = 1;
  171.     for (var i = 0; i < len; i += 1) {
  172.       left = line[i - colorsPerPixel] || 0;
  173.       result[i + 1] = (line[i] - left + 0x0100) & 0xff;
  174.     }
  176.     return result;
  177.   };
  179.   var filterUp = function(line, colorsPerPixel, prevLine) {
  180.     var result = [],
  181.       len = line.length,
  182.       up;
  184.     result[0] = 2;
  186.     for (var i = 0; i < len; i += 1) {
  187.       up = (prevLine && prevLine[i]) || 0;
  188.       result[i + 1] = (line[i] - up + 0x0100) & 0xff;
  189.     }
  191.     return result;
  192.   };
  194.   var filterAverage = function(line, colorsPerPixel, prevLine) {
  195.     var result = [],
  196.       len = line.length,
  197.       left,
  198.       up;
  200.     result[0] = 3;
  202.     for (var i = 0; i < len; i += 1) {
  203.       left = line[i - colorsPerPixel] || 0;
  204.       up = (prevLine && prevLine[i]) || 0;
  205.       result[i + 1] = (line[i] + 0x0100 - ((left + up) >>> 1)) & 0xff;
  206.     }
  208.     return result;
  209.   };
  211.   var filterPaeth = function(line, colorsPerPixel, prevLine) {
  212.     var result = [],
  213.       len = line.length,
  214.       left,
  215.       up,
  216.       upLeft,
  217.       paeth;
  219.     result[0] = 4;
  221.     for (var i = 0; i < len; i += 1) {
  222.       left = line[i - colorsPerPixel] || 0;
  223.       up = (prevLine && prevLine[i]) || 0;
  224.       upLeft = (prevLine && prevLine[i - colorsPerPixel]) || 0;
  225.       paeth = paethPredictor(left, up, upLeft);
  226.       result[i + 1] = (line[i] - paeth + 0x0100) & 0xff;
  227.     }
  229.     return result;
  230.   };
  232.   var paethPredictor = function(left, up, upLeft) {
  233.     if (left === up && up === upLeft) {
  234.       return left;
  235.     }
  236.     var pLeft = Math.abs(up - upLeft),
  237.       pUp = Math.abs(left - upLeft),
  238.       pUpLeft = Math.abs(left + up - upLeft - upLeft);
  239.     return pLeft <= pUp && pLeft <= pUpLeft
  240.       ? left
  241.       : pUp <= pUpLeft
  242.       ? up
  243.       : upLeft;
  244.   };
  246.   var getFilterMethods = function() {
  247.     return [filterNone, filterSub, filterUp, filterAverage, filterPaeth];
  248.   };
  250.   var getIndexOfSmallestSum = function(arrays) {
  251.     var sum = arrays.map(function(value) {
  252.       return value.reduce(function(pv, cv) {
  253.         return pv + Math.abs(cv);
  254.       }, 0);
  255.     });
  256.     return sum.indexOf(Math.min.apply(null, sum));
  257.   };
  259.   var getPredictorFromCompression = function(compression) {
  260.     var predictor;
  261.     switch (compression) {
  262.       case jsPDFAPI.image_compression.FAST:
  263.         predictor = 11;
  264.         break;
  266.       case jsPDFAPI.image_compression.MEDIUM:
  267.         predictor = 13;
  268.         break;
  270.       case jsPDFAPI.image_compression.SLOW:
  271.         predictor = 14;
  272.         break;
  274.       default:
  275.         predictor = 12;
  276.         break;
  277.     }
  278.     return predictor;
  279.   };
  281.   /**
  282.    * @name processPNG
  283.    * @function
  284.    * @ignore
  285.    */
  286.   jsPDFAPI.processPNG = function(imageData, index, alias, compression) {
  287.     "use strict";
  289.     var colorSpace,
  290.       filter = this.decode.FLATE_DECODE,
  291.       bitsPerComponent,
  292.       image,
  293.       decodeParameters = "",
  294.       trns,
  295.       colors,
  296.       pal,
  297.       smask,
  298.       pixels,
  299.       len,
  300.       alphaData,
  301.       imgData,
  302.       hasColors,
  303.       pixel,
  304.       i,
  305.       n;
  307.     if (this.__addimage__.isArrayBuffer(imageData))
  308.       imageData = new Uint8Array(imageData);
  310.     if (this.__addimage__.isArrayBufferView(imageData)) {
  311.       image = new PNG(imageData);
  312.       imageData = image.imgData;
  313.       bitsPerComponent = image.bits;
  314.       colorSpace = image.colorSpace;
  315.       colors = image.colors;
  317.       /*
  318.        * colorType 6 - Each pixel is an R,G,B triple, followed by an alpha sample.
  319.        *
  320.        * colorType 4 - Each pixel is a grayscale sample, followed by an alpha sample.
  321.        *
  322.        * Extract alpha to create two separate images, using the alpha as a sMask
  323.        */
  324.       if ([4, 6].indexOf(image.colorType) !== -1) {
  325.         /*
  326.          * processes 8 bit RGBA and grayscale + alpha images
  327.          */
  328.         if (image.bits === 8) {
  329.           pixels =
  330.             image.pixelBitlength == 32
  331.               ? new Uint32Array(image.decodePixels().buffer)
  332.               : image.pixelBitlength == 16
  333.               ? new Uint16Array(image.decodePixels().buffer)
  334.               : new Uint8Array(image.decodePixels().buffer);
  335.           len = pixels.length;
  336.           imgData = new Uint8Array(len * image.colors);
  337.           alphaData = new Uint8Array(len);
  338.           var pDiff = image.pixelBitlength - image.bits;
  339.           i = 0;
  340.           n = 0;
  341.           var pbl;
  343.           for (; i < len; i++) {
  344.             pixel = pixels[i];
  345.             pbl = 0;
  347.             while (pbl < pDiff) {
  348.               imgData[n++] = (pixel >>> pbl) & 0xff;
  349.               pbl = pbl + image.bits;
  350.             }
  352.             alphaData[i] = (pixel >>> pbl) & 0xff;
  353.           }
  354.         }
  356.         /*
  357.          * processes 16 bit RGBA and grayscale + alpha images
  358.          */
  359.         if (image.bits === 16) {
  360.           pixels = new Uint32Array(image.decodePixels().buffer);
  361.           len = pixels.length;
  362.           imgData = new Uint8Array(
  363.             len * (32 / image.pixelBitlength) * image.colors
  364.           );
  365.           alphaData = new Uint8Array(len * (32 / image.pixelBitlength));
  366.           hasColors = image.colors > 1;
  367.           i = 0;
  368.           n = 0;
  369.           var a = 0;
  371.           while (i < len) {
  372.             pixel = pixels[i++];
  374.             imgData[n++] = (pixel >>> 0) & 0xff;
  376.             if (hasColors) {
  377.               imgData[n++] = (pixel >>> 16) & 0xff;
  379.               pixel = pixels[i++];
  380.               imgData[n++] = (pixel >>> 0) & 0xff;
  381.             }
  383.             alphaData[a++] = (pixel >>> 16) & 0xff;
  384.           }
  385.           bitsPerComponent = 8;
  386.         }
  388.         if (canCompress(compression)) {
  389.           imageData = compressBytes(
  390.             imgData,
  391.             image.width * image.colors,
  392.             image.colors,
  393.             compression
  394.           );
  395.           smask = compressBytes(alphaData, image.width, 1, compression);
  396.         } else {
  397.           imageData = imgData;
  398.           smask = alphaData;
  399.           filter = undefined;
  400.         }
  401.       }
  403.       /*
  404.        * Indexed png. Each pixel is a palette index.
  405.        */
  406.       if (image.colorType === 3) {
  407.         colorSpace = this.color_spaces.INDEXED;
  408.         pal = image.palette;
  410.         if (image.transparency.indexed) {
  411.           var trans = image.transparency.indexed;
  412.           var total = 0;
  413.           i = 0;
  414.           len = trans.length;
  416.           for (; i < len; ++i) {
  417.             total += trans[i];
  418.           }
  420.           total = total / 255;
  422.           /*
  423.            * a single color is specified as 100% transparent (0),
  424.            * so we set trns to use a /Mask with that index
  425.            */
  426.           if (total === len - 1 && trans.indexOf(0) !== -1) {
  427.             trns = [trans.indexOf(0)];
  429.             /*
  430.              * there's more than one colour within the palette that specifies
  431.              * a transparency value less than 255, so we unroll the pixels to create an image sMask
  432.              */
  433.           } else if (total !== len) {
  434.             pixels = image.decodePixels();
  435.             alphaData = new Uint8Array(pixels.length);
  436.             i = 0;
  437.             len = pixels.length;
  439.             for (; i < len; i++) {
  440.               alphaData[i] = trans[pixels[i]];
  441.             }
  443.             smask = compressBytes(alphaData, image.width, 1);
  444.           }
  445.         }
  446.       }
  448.       var predictor = getPredictorFromCompression(compression);
  450.       if (filter === this.decode.FLATE_DECODE) {
  451.         decodeParameters = "/Predictor " + predictor + " ";
  452.       }
  453.       decodeParameters +=
  454.         "/Colors " +
  455.         colors +
  456.         " /BitsPerComponent " +
  457.         bitsPerComponent +
  458.         " /Columns " +
  459.         image.width;
  461.       if (
  462.         this.__addimage__.isArrayBuffer(imageData) ||
  463.         this.__addimage__.isArrayBufferView(imageData)
  464.       ) {
  465.         imageData = this.__addimage__.arrayBufferToBinaryString(imageData);
  466.       }
  468.       if (
  469.         (smask && this.__addimage__.isArrayBuffer(smask)) ||
  470.         this.__addimage__.isArrayBufferView(smask)
  471.       ) {
  472.         smask = this.__addimage__.arrayBufferToBinaryString(smask);
  473.       }
  475.       return {
  476.         alias: alias,
  477.         data: imageData,
  478.         index: index,
  479.         filter: filter,
  480.         decodeParameters: decodeParameters,
  481.         transparency: trns,
  482.         palette: pal,
  483.         sMask: smask,
  484.         predictor: predictor,
  485.         width: image.width,
  486.         height: image.height,
  487.         bitsPerComponent: bitsPerComponent,
  488.         colorSpace: colorSpace
  489.       };
  490.     }
  491.   };
  492. })(jsPDF.API);