diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index bfa2f1d2..01465037 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,6 +1,6 @@ ### Use case: description, code -[jsfiddle](https://jsfiddle.net/tsayen/ojb1b31r/2/) +[jsfiddle](https://jsfiddle.net/IDisposable/emjL1ow8/) ### Expected behavior @@ -12,4 +12,3 @@ - [ ] Chrome 49+ - [ ] Firefox 45+ - diff --git a/.gitignore b/.gitignore index ee09e858..741109ef 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,3 @@ .tags .tags* node_modules -dist \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 03b13063..a35c7b6b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,8 @@ dist: trusty +node_js: + "8" addons: - firefox: "49.0" + firefox: "latest" language: node_js before_install: - sudo apt-get update -q diff --git a/Gruntfile.js b/Gruntfile.js index 50885a9b..c477b955 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,4 +1,4 @@ -module.exports = function (grunt) { +module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), diff --git a/README.md b/README.md index 5fc84efb..f19ffc78 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,17 @@ ## What is it **dom-to-image** is a library which can turn arbitrary DOM node into -a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's -based on [domvas by Paul Bakaus](https://github.com/pbakaus/domvas) +a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. + +This fork of [dom-to-image by Anatolii Saienko (tsayen)](https://github.com/tsayen/dom-to-image) +with some important fixes merged. We are eternally grateful for his starting point. + +Anatolii's version was based on [domvas by Paul Bakaus](https://github.com/pbakaus/domvas) and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added. +Moved to [tsayen organization](https://github.com/tsayen/) from my repositories 2019-02-06 as of version 2.7.3 + ## Installation ### NPM @@ -43,7 +49,7 @@ and it will make the `domtoimage` variable available in the global scope. ## Usage All the top level functions accept DOM node and rendering options, -and return promises, which are fulfilled with corresponding data URLs. +and return promises, which are fulfilled with corresponding data URLs. Get a PNG image base64-encoded data URL and display right away: ```javascript @@ -113,6 +119,15 @@ domtoimage.toPixelData(node) }); ``` +Get a canvas object: + +```javascript +domtoimage.toCanvas(document.getElementById('my-node')) + .then(function (canvas) { + console.log('canvas', canvas.width, canvas.height); + }); +``` + * * * _All the functions under `impl` are not public API and are exposed only @@ -160,10 +175,10 @@ A data URL for a placeholder image that will be used when fetching an image fail It's tested on latest Chrome and Firefox (49 and 45 respectively at the time of writing), with Chrome performing significantly better on big DOM trees, possibly due to it's more performant SVG support, and the fact that it supports - `CSSStyleDeclaration.cssText` property. + `CSSStyleDeclaration.cssText` property. _Internet Explorer is not (and will not be) supported, as it does not support -SVG `` tag_ +SVG `` tag_ _Safari [is not supported](https://github.com/tsayen/dom-to-image/issues/27), as it uses a stricter security model on ` tag. Suggested workaround is to use `toSvg` and render on the server._` @@ -171,19 +186,19 @@ _Safari [is not supported](https://github.com/tsayen/dom-to-image/issues/27), as ### Source -Only standard lib is currently used, but make sure your browser supports: +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 `` tag +- [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) +- SVG `` tag ### Tests Most importantly, tests depend on: -- [js-imagediff](https://github.com/HumbleSoftware/js-imagediff), +- [js-imagediff](https://github.com/HumbleSoftware/js-imagediff), to compare rendered and control images -- [ocrad.js](https://github.com/antimatter15/ocrad.js), for the +- [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 @@ -192,62 +207,63 @@ Most importantly, tests depend on: There might some day exist (or maybe already exists?) a simple and standard way of exporting parts of the HTML to image (and then this script can only serve as an evidence of all the hoops I had to jump through in order to get -such obvious thing done) but I haven't found one so far. +such obvious thing done) but I haven't found one so far. This library uses a feature of SVG that allows having arbitrary HTML content inside of the `` tag. So, in order to render that DOM node -for you, following steps are taken: +for you, following steps are taken: -1. Clone the original DOM node recursively +1. Clone the original DOM node recursively -2. Compute the style for the node and each sub-node and copy it to - corresponding clone +1. Compute the style for the node and each sub-node and copy it to + corresponding clone - - and don't forget to recreate pseudo-elements, as they are not - cloned in any way, of course + - and don't forget to recreate pseudo-elements, as they are not + cloned in any way, of course -3. Embed web fonts +1. Embed web fonts - - find all the `@font-face` declarations that might represent web fonts + - find all the `@font-face` declarations that might represent web fonts - - parse file URLs, download corresponding files + - parse file URLs, download corresponding files - - base64-encode and inline content as `data:` URLs + - base64-encode and inline content as `data:` URLs - - concatenate all the processed CSS rules and put them into one `