Merge branch 'master' into master

Author: cnatis

README.md

@@ -164,9 +164,12 @@ Set to true to have the resulting image take into account scroll positioning, th
 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
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-to-image",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "homepage": "https://github.com/tsayen/dom-to-image",
   "authors": [
     "Anatolii Saienko <[email protected]>"
@@ -29,7 +29,6 @@
   "devDependencies": {
     "js-imagediff": "~1.0.8",
     "jquery": "~2.1.3",
-    "fontawesome": "~4.4.0",
-    "ocrad-bower": "*"
+    "fontawesome": "~4.4.0"
   }
 }

dist/dom-to-image.min.js

@@ -20,7 +20,7 @@ module.exports = function (config) {
 
             'bower_components/jquery/dist/jquery.js',
             'bower_components/js-imagediff/imagediff.js',
-            'bower_components/ocrad-bower/ocrad.js',
+            'test-lib/tesseract-1.0.10.js',
 
             'src/dom-to-image.js',
             'spec/dom-to-image.spec.js'

karma.conf.js

@@ -1,6 +1,6 @@
 {
     "name": "dom-to-image",
-    "version": "2.5.2",
+    "version": "2.6.0",
     "description": "Generates an image from a DOM node using HTML5 canvas and SVG",
     "main": "src/dom-to-image.js",
     "dependencies": {},

package.json

@@ -5,7 +5,6 @@
     var imagediff = global.imagediff;
     var domtoimage = global.domtoimage;
     var Promise = global.Promise;
-    var ocr = global.OCRAD;
 
     var delay = domtoimage.impl.util.delay;
 
@@ -124,6 +123,7 @@
             });
 
             it('should render text nodes', function (done) {
+                this.timeout(10000);
                 loadTestPage('text/dom-node.html', 'text/style.css')
                     .then(renderToPng)
                     .then(drawDataUrl)
@@ -132,11 +132,12 @@
             });
 
             it('should preserve content of ::before and ::after pseudo elements', function (done) {
+                this.timeout(10000);
                 loadTestPage('pseudo/dom-node.html', 'pseudo/style.css')
                     .then(renderToPng)
                     .then(drawDataUrl)
-                    .then(assertTextRendered(["ONLYBEFORE", "BOTHBEFORE"]))
-                    .then(assertTextRendered(["ONLYAFTER", "BOTHAFTER"]))
+                    .then(assertTextRendered(["JUSTBEFORE", "BOTHBEFORE"]))
+                    .then(assertTextRendered(["JUSTAFTER", "BOTHAFTER"]))
                     .then(done).catch(done);
             });
 
@@ -185,7 +186,7 @@
                     .then(delay(1000))
                     .then(renderToPng)
                     .then(drawDataUrl)
-                    .then(assertTextRendered(['o']))
+                    .then(assertTextRendered(['O']))
                     .then(done).catch(done);
             });
 
@@ -237,11 +238,11 @@
                         ctx.fillRect(0, 0, canvas.width, canvas.height);
                         ctx.fillStyle = '#000000';
                         ctx.font = '100px monospace';
-                        ctx.fillText('o', canvas.width / 2, canvas.height / 2);
+                        ctx.fillText('0', canvas.width / 2, canvas.height / 2);
                     })
                     .then(renderToPng)
                     .then(drawDataUrl)
-                    .then(assertTextRendered(["o"]))
+                    .then(assertTextRendered(['0']))
                     .then(done).catch(done);
             });
 
@@ -384,9 +385,18 @@
 
             function assertTextRendered(lines) {
                 return function () {
-                    var renderedText = ocr(canvas());
-                    lines.forEach(function (line) {
-                        assert.include(renderedText, line);
+                    return new Promise(function (resolve, reject) {
+                        Tesseract.recognize(canvas())
+                            .then(function(result) {
+                                lines.forEach(function(line) {
+                                    try {
+                                        assert.include(result.text, line);
+                                    } catch(e) {
+                                        reject(e);
+                                    }
+                                });
+                                resolve();
+                            });
                     });
                 };
             }

spec/dom-to-image.spec.js

@@ -1,8 +1,8 @@
 .with-before::before {
-    content: 'ONLYBEFORE';
+    content: 'JUSTBEFORE';
 }
 .with-after::after {
-    content: 'ONLYAFTER';
+    content: 'JUSTAFTER';
 }
 .with-both::before {
     content: 'BOTHBEFORE';
@@ -13,6 +13,6 @@
 
 #dom-node {
     background-color: white;
-    font-family: monospace;
+    font-family: sans-serif;
     font-size: 20px;
 }

spec/resources/pseudo/style.css

@@ -149,7 +149,7 @@
         } else {
             domtoimage.impl.options.cacheBust = options.cacheBust;
         }
-
+      
         if(typeof(options.scrollFix) === 'undefined') {
             domtoimage.impl.options.scrollFix = defaultOptions.scrollFix;
         } else {