Release 3.6.0

.github/ISSUE_TEMPLATE.md

@@ -10,5 +10,5 @@
 
 ## Browsers
 
--   [ ] Chrome 49+
--   [ ] Firefox 45+
+- [ ] Chrome 49+
+- [ ] Firefox 45+

README.md

@@ -14,13 +14,10 @@ dom-to-image-more. As browsers have matured, many of the hacks we're accumulated
 years are not needed, or better ways have been found to handle some edge-cases. With the
 help of folks like @meche-gh, in #99 we're stripping out the following members:
 
--   `.mimes` - was the not-very-comprehensive list of mime types used to handle inlining
-    things
--   `.parseExtension` - was a method to extract the extension from a filename, used to
-    guess mime types
--   `.mimeType` - was a method to map file extensions to mime types
--   `.dataAsUrl` - was a method to reassemble a `data:` URI from a Base64 representation
-    and mime type
+    - `.mimes` - was the not-very-comprehensive list of mime types used to handle inlining things
+    - `.parseExtension` - was a method to extract the extension from a filename, used to guess mime types
+    - `.mimeType` - was a method to map file extensions to mime types
+    - `.dataAsUrl` - was a method to reassemble a `data:` URI from a Base64 representation and mime type
 
 The 3.x release branch should also fix more node compatibility and `iframe` issues.
 
@@ -49,110 +46,110 @@ Moved to [1904labs organization](https://github.com/1904labs/) from my repositor
 
 Then load
 
-```javascript
-/* in ES 6 */
-import domtoimage from 'dom-to-image-more';
-/* in ES 5 */
-var domtoimage = require('dom-to-image-more');
-```
+    ```javascript
+    /* in ES 6 */
+    import domtoimage from 'dom-to-image-more';
+    /* in ES 5 */
+    var domtoimage = require('dom-to-image-more');
+    ```
 
 ## Usage
 
 All the top level functions accept DOM node and rendering options, and return promises,
-which are fulfilled with corresponding data URLs.
-Get a PNG image base64-encoded data URL and display right away:
-
-```javascript
-var node = document.getElementById('my-node');
-
-domtoimage
-    .toPng(node)
-    .then(function (dataUrl) {
-        var img = new Image();
-        img.src = dataUrl;
-        document.body.appendChild(img);
-    })
-    .catch(function (error) {
-        console.error('oops, something went wrong!', error);
-    });
-```
+which are fulfilled with corresponding data URLs. Get a PNG image base64-encoded data URL
+and display right away:
+
+    ```javascript
+    var node = document.getElementById('my-node');
+
+    domtoimage
+        .toPng(node)
+        .then(function (dataUrl) {
+            var img = new Image();
+            img.src = dataUrl;
+            document.body.appendChild(img);
+        })
+        .catch(function (error) {
+            console.error('oops, something went wrong!', error);
+        });
+    ```
 
 Get a PNG image blob and download it (using
 [FileSaver](https://github.com/eligrey/FileSaver.js/), for example):
 
-```javascript
-domtoimage.toBlob(document.getElementById('my-node')).then(function (blob) {
-    window.saveAs(blob, 'my-node.png');
-});
-```
+    ```javascript
+    domtoimage.toBlob(document.getElementById('my-node')).then(function (blob) {
+        window.saveAs(blob, 'my-node.png');
+    });
+    ```
 
 Save and download a compressed JPEG image:
 
-```javascript
-domtoimage
-    .toJpeg(document.getElementById('my-node'), { quality: 0.95 })
-    .then(function (dataUrl) {
-        var link = document.createElement('a');
-        link.download = 'my-image-name.jpeg';
-        link.href = dataUrl;
-        link.click();
-    });
-```
+    ```javascript
+    domtoimage
+        .toJpeg(document.getElementById('my-node'), { quality: 0.95 })
+        .then(function (dataUrl) {
+            var link = document.createElement('a');
+            link.download = 'my-image-name.jpeg';
+            link.href = dataUrl;
+            link.click();
+        });
+    ```
 
 Get an SVG data URL, but filter out all the `<i>` elements:
 
-```javascript
-function filter(node) {
-    return node.tagName !== 'i';
-}
+    ```javascript
+    function filter(node) {
+        return node.tagName !== 'i';
+    }
 
-domtoimage
-    .toSvg(document.getElementById('my-node'), { filter: filter })
-    .then(function (dataUrl) {
-        /* do something */
-    });
-```
+    domtoimage
+        .toSvg(document.getElementById('my-node'), { filter: filter })
+        .then(function (dataUrl) {
+            /* do something */
+        });
+    ```
 
 Get the raw pixel data as a
 [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)
 with every 4 array elements representing the RGBA data of a pixel:
 
-```javascript
-var node = document.getElementById('my-node');
-
-domtoimage.toPixelData(node).then(function (pixels) {
-    for (var y = 0; y < node.scrollHeight; ++y) {
-        for (var x = 0; x < node.scrollWidth; ++x) {
-            pixelAtXYOffset = 4 * y * node.scrollHeight + 4 * x;
-            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
-            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
+    ```javascript
+    var node = document.getElementById('my-node');
+
+    domtoimage.toPixelData(node).then(function (pixels) {
+        for (var y = 0; y < node.scrollHeight; ++y) {
+            for (var x = 0; x < node.scrollWidth; ++x) {
+                pixelAtXYOffset = 4 * y * node.scrollHeight + 4 * x;
+                /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
+                pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
+            }
         }
-    }
-});
-```
+    });
+    ```
 
 Get a canvas object:
 
-```javascript
-domtoimage.toCanvas(document.getElementById('my-node')).then(function (canvas) {
-    console.log('canvas', canvas.width, canvas.height);
-});
-```
+    ```javascript
+    domtoimage.toCanvas(document.getElementById('my-node')).then(function (canvas) {
+        console.log('canvas', canvas.width, canvas.height);
+    });
+    ```
 
 Adjust cloned nodes before/after children are cloned
 [sample fiddle](https://jsfiddle.net/IDisposable/grLtjwe5/12/)
 
-```javascript
-const adjustClone = (node, clone, after) => {
-    if (!after && clone.id === 'element') {
-        clone.style.transform = 'translateY(100px)';
-    }
-    return clone;
-};
+    ```javascript
+    const adjustClone = (node, clone, after) => {
+        if (!after && clone.id === 'element') {
+            clone.style.transform = 'translateY(100px)';
+        }
+        return clone;
+    };
 
-const wrapper = document.getElementById('wrapper');
-const blob = domtoimage.toBlob(wrapper, { adjustClonedNode: adjustClone });
-```
+    const wrapper = document.getElementById('wrapper');
+    const blob = domtoimage.toBlob(wrapper, { adjustClonedNode: adjustClone });
+    ```
 
 ---
 
@@ -170,16 +167,16 @@ on the root node.
 
 #### filterStyles
 
-A function taking style propertie name as argument. Should return true if passed propertie should be
-included in the output
+A function taking style propertie name as argument. Should return true if passed propertie
+should be included in the output
 
 Sample use:
 
-```
-  filterStyles(node, propertyName) {
-    return !propertyName.startssWith('--'); // to filter out CSS variables
-  }
-```
+    ```javascript
+      filterStyles(node, propertyName) {
+        return !propertyName.startssWith('--'); // to filter out CSS variables
+      }
+    ```
 
 #### adjustClonedNode
 
@@ -190,13 +187,14 @@ we've cloned the children already (so you can handle either before or after)
 
 Sample use:
 
-```const adjustClone = (node, clone, after) => {
-  if (!after && clone.id === 'element') {
-    clone.style.transform = 'translateY(100px)';
-  }
-  return clone;
-}
-```
+    ```javascript
+    const adjustClone = (node, clone, after) => {
+      if (!after && clone.id === 'element') {
+        clone.style.transform = 'translateY(100px)';
+      }
+      return clone;
+    }
+    ```
 
 const wrapper = document.getElementById('wrapper'); const blob =
 domtoimage.toBlob(wrapper, { adjustClonedNode: adjustClone});
@@ -311,8 +309,8 @@ or Node 16.9.0
 
 Only standard lib is currently used, but make sure your browser supports:
 
--   [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)
--   SVG `<foreignObject>` tag
+- [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+- SVG `<foreignObject>` tag
 
 ### Tests
 
@@ -322,9 +320,9 @@ track down where exactly the inlining of CSS styles against the DOM nodes is wro
 
 Most importantly, tests **only** depend on:
 
--   [ocrad.js](https://github.com/antimatter15/ocrad.js), for the parts when you can't
-    compare images (due to the browser rendering differences) and just have to test
-    whether the text is rendered
+- [ocrad.js](https://github.com/antimatter15/ocrad.js), for the parts when you can't
+  compare images (due to the browser rendering differences) and just have to test whether
+  the text is rendered
 
 ## How it works
 
@@ -373,27 +371,27 @@ taken:
 
 ## Using Typescript
 
-1. Use original `dom-to-image` type definition
-   `npm install @types/dom-to-image --save-dev`
+1.  Use original `dom-to-image` type definition
+    `npm install @types/dom-to-image --save-dev`
 
-1. Create dom-to-image-more type definition (`dom-to-image-more.d.ts`)
+1.  Create dom-to-image-more type definition (`dom-to-image-more.d.ts`)
 
-    ```javascript
-    declare module 'dom-to-image-more' {
-     import domToImage = require('dom-to-image-more');
-     export = domToImage;
-    }
-    ```
+        ```javascript
+        declare module 'dom-to-image-more' {
+         import domToImage = require('dom-to-image-more');
+         export = domToImage;
+        }
+        ```
 
 ## Things to watch out for
 
--   if the DOM node you want to render includes a `<canvas>` element with something drawn
-    on it, it should be handled fine, unless the canvas is
-    [tainted](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image) - in
-    this case rendering will rather not succeed.
+- if the DOM node you want to render includes a `<canvas>` element with something drawn on
+  it, it should be handled fine, unless the canvas is
+  [tainted](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image) - in
+  this case rendering will rather not succeed.
 
--   at the time of writing, Firefox has a problem with some external stylesheets (see
-    issue #13). In such case, the error will be caught and logged.
+- at the time of writing, Firefox has a problem with some external stylesheets (see issue
+  #13). In such case, the error will be caught and logged.
 
 ## Authors
 
@@ -406,7 +404,8 @@ DOLCIMASCOLO (packaging), Zee (ZM) @zm-cttae (many major updates), Joshua Walsh
 (useCredentialsFilters), Aravind @codesculpture (fix overridden props), Shi Wenyu @cWenyu
 (shadow slot fix), David Burns @davidburns573 and Yujia Cheng @YujiaCheng1996 (font copy
 optional), Julien Dorra @juliendorra (documentation), Sean Zhang @SeanZhang-eaton (regex
-fixes)
+fixes), Ludovic Bouges @ludovic (style property filter), Roland Ma @RolandMa1986 (URL
+regex)"
 
 ## License