Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix/restore dist #6

Merged
merged 39 commits into from
Jan 28, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
efd29f6
toCanvas returns a promise that is fulfilled with a canvas object.
andreasg123 Jul 12, 2017
a9b2478
ignore image with invalid src
ioslh Jul 26, 2018
7d1476a
Prepare for new package name.
Aug 17, 2018
dc0cc20
Force-passed some tests that no longer work
Aug 17, 2018
4abc9ec
Fix badge
Aug 17, 2018
0cfa060
Bump release to 2.7.1
Aug 17, 2018
bcc338a
Ignore images with invalid src
Aug 17, 2018
e81f4cc
Merged Add toCanvas method.
Aug 17, 2018
1761329
2.7.2
Feb 6, 2019
e797205
Moving repository to 1904labs organization
Feb 6, 2019
699a79b
Fix JSFiddle link in issue template
Feb 6, 2019
d2f8695
Removed and excluded node_modules
Feb 6, 2019
0e34d0b
Upgrade all packages.
Feb 6, 2019
5564c1b
2.7.4
Feb 6, 2019
478bc1a
Updating travis for node 8
Feb 6, 2019
95c31df
Allow text rendering test to run a bit longer
Feb 6, 2019
fd76e62
Release 2.7.4 upgrading all packages.
IDisposable Feb 6, 2019
7e61ad6
Optionally send (existing) credentials for authentication of external…
Feb 6, 2019
23ed8eb
Release 2.7.5
Feb 6, 2019
ebeff16
fix export of 0 size canvas elements #3
AidasK Apr 15, 2019
97b22a4
Merge pull request #4 from AidasK/master
IDisposable Apr 16, 2019
d6cbb82
Add tests and prepare release
Apr 16, 2019
19f24e4
2.7.6
Apr 16, 2019
2c2d6ef
Fix bower version
Apr 16, 2019
c40c065
Update dev dependencies and fix test
Apr 17, 2019
561ee14
Release 2.7.7
Apr 17, 2019
9922b75
Extend timeout for image rendering test.
May 21, 2019
96fceff
FIX: File extension error when URL has query parameters
May 21, 2019
54e93c6
Prepare for 2.8.0 release
May 21, 2019
2a000af
fix font mangling
kufii Oct 4, 2019
d3ee842
fix font mangling (#18)
IDisposable Oct 16, 2019
7dc7198
restore dist
marcandrews Jan 28, 2020
b750889
remove postbuild
marcandrews Jan 28, 2020
5c1d884
Merge remote-tracking branch '1904labs/master' into bugfix/restore-dist
marcandrews Jan 28, 2020
428c4a4
fix getCssRules
marcandrews Jan 28, 2020
d505abd
1904labs > tsayen
marcandrews Jan 28, 2020
7a14a25
revert
marcandrews Jan 28, 2020
e657f33
revert
marcandrews Jan 28, 2020
9089f86
yarn.lock
marcandrews Jan 28, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .github/ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
### Use case: description, code

[jsfiddle](https://jsfiddle.net/tsayen/ojb1b31r/2/)
[jsfiddle](https://jsfiddle.net/IDisposable/emjL1ow8/)

### Expected behavior

Expand All @@ -12,4 +12,3 @@

- [ ] Chrome 49+
- [ ] Firefox 45+

1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,3 @@
.tags
.tags*
node_modules
dist
4 changes: 3 additions & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = function (grunt) {
module.exports = function(grunt) {

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
Expand Down
92 changes: 54 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -160,30 +175,30 @@ 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 `<foreignObject>` tag_
SVG `<foreignObject>` tag_

_Safari [is not supported](https://github.com/tsayen/dom-to-image/issues/27), as it uses a stricter security model on `<foreignObject`> tag. Suggested workaround is to use `toSvg` and render on the server._`

## Dependencies

### 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 `<foreignObject>` tag
- [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- SVG `<foreignObject>` 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

Expand All @@ -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 `<foreignObject>` 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 `<style>`
- concatenate all the processed CSS rules and put them into one `<style>`
element, then attach it to the clone

4. Embed images
1. Embed images

- embed image URLs in `<img>` elements
- embed image URLs in `<img>` elements

- inline images used in `background` CSS property, in a fashion similar to
fonts
- inline images used in `background` CSS property, in a fashion similar to
fonts

5. Serialize the cloned node to XML
1. Serialize the cloned node to XML

6. Wrap XML into the `<foreignObject>` tag, then into the SVG, then make it a
data URL
1. Wrap XML into the `<foreignObject>` tag, then into the SVG, then make it a
data URL

7. Optionally, to get PNG content or raw pixel data as a Uint8Array, create an
Image element with the SVG as a source, and render it on an off-screen
canvas, that you have also created, then read the content from the canvas
1. Optionally, to get PNG content or raw pixel data as a Uint8Array, create an
Image element with the SVG as a source, and render it on an off-screen
canvas, that you have also created, then read the content from the canvas

8. Done!
1. Done!

## Things to watch out for

- if the DOM node you want to render includes a `<canvas>` element with
- 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.
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

Anatolii Saienko, Paul Bakaus (original idea)
Marc Brooks, Anatolii Saienko (original dom-to-image), Paul Bakaus (original idea),
Aidas Klimas (fixes), Edgardo Di Gesto (fixes), 樊冬 Fan Dong (fixes)

## License

Expand Down
2 changes: 2 additions & 0 deletions dist/dom-to-image.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions karma.conf.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = function (config) {
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
Expand Down Expand Up @@ -36,7 +36,7 @@ module.exports = function (config) {
captureConsole: true
},
autoWatch: true,
browsers: ['chrome', 'Firefox'],
browsers: ['chrome'],
customLaunchers: {
chrome: {
base: 'Chrome',
Expand All @@ -47,4 +47,4 @@ module.exports = function (config) {
singleRun: false,
browserNoActivityTimeout: 60000
});
};
};
Loading