Parameterize the cors and proxy options

README.md

@@ -120,3 +120,25 @@ global.screenShotUtils = new screenShotUtils({
 ```
 And you can now take fullpage screen shot, element screenshot using browser.takeScreenshot() with all options given in above examples.
 
+##Override default html2canvas options: 
+
+You can override the default html2canvas options using the canvasOptions attribute. Refer [here](https://html2canvas.hertzen.com/configuration/) for the list of options.
+
+```javascript
+screenShotUtils.takeScreenshot({
+    element : element(by.id("main-container")),
+    dimensions : {
+        x:20, //starting x point
+        y:40, //startng y point
+        width : 200,
+        height: 200
+    },
+    saveTo: "croppedElementImage.png", 
+    canvasOptions: {
+      allowTaint: true,
+      useCORS: false,
+      proxy: "http://localhost:3000"
+    }
+});
+```
+

dist/index.d.ts

@@ -12,6 +12,30 @@ interface screenShotOptions {
         height: number;
     };
     saveTo?: string;
+    canvasOptions?: canvasOptions;
+}
+interface canvasOptions {
+    allowTaint?: boolean;
+    backgroundColor?: string;
+    canvas?: HTMLCanvasElement;
+    foreignObjectRendering?: boolean;
+    imageTimeout?: number;
+    ignoreElements?: (element: Element) => boolean;
+    logging?: boolean;
+    onclone?: (document: Document) => void;
+    proxy?: string;
+    removeContainer?: boolean;
+    scale?: number;
+    useCORS?: boolean;
+    width?: number;
+    height?: number;
+    x?: number;
+    y?: number;
+    scrollX?: number;
+    scrollY?: number;
+    windowWidth?: number;
+    windowHeight?: number;
+    letterRendering?: boolean;
 }
 declare class ProtractorScreenShotUtils {
     private browser;

dist/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProtractorScreenShotUtils = void 0;
 var fs = require("fs");
 var html2canvasPath = require.resolve("html2canvas").replace("/npm/index.js", "/html2canvas.min.js");
 var ProtractorScreenShotUtils = (function () {
@@ -15,9 +16,9 @@ var ProtractorScreenShotUtils = (function () {
     }
     ProtractorScreenShotUtils.prototype.takeScreenshot = function (options) {
         if (options === void 0) { options = {}; }
-        var currentContext = this.browser ? this.browser : this, element = options.element ? options.element : currentContext.$("body"), dimensions = options.dimensions || {}, outputPath = options.saveTo || null, html2canvasScript = fs.readFileSync(html2canvasPath, 'utf8'), injectionScript = "var callBack = arguments[arguments.length -1];\n                var dimensions = arguments[1];\n                html2canvas(arguments[0], {allowTaint : true, useCORS: true}).then(function(canvas){\n                     \n                     if(Object.keys(dimensions).length == 4) {\n                        console.log(\"Success\");\n                        var croppedCanvas = document.createElement(\"canvas\");\n                        var context = canvas.getContext('2d');\n                        var croppedImage = context.getImageData(dimensions.x,dimensions.y,canvas.width,canvas.height);\n                        console.log(croppedImage)\n                        console.log(canvas.width,canvas.height);\n                        var croppedContext = croppedCanvas.getContext('2d');\n                        croppedCanvas.width = dimensions.width;\n                        croppedCanvas.height = dimensions.height;\n                        croppedContext.putImageData(croppedImage,0,0);\n                        callBack(croppedCanvas.toDataURL())\n                     } else {\n                        callBack(canvas.toDataURL())\n                     }\n                 })";
+        var currentContext = this.browser ? this.browser : this, element = options.element ? options.element : currentContext.$("body"), dimensions = options.dimensions || {}, outputPath = options.saveTo || null, canvasOptions = options.canvasOptions || {}, html2canvasScript = fs.readFileSync(html2canvasPath, 'utf8'), injectionScript = "var callBack = arguments[arguments.length -1];\n                var dimensions = arguments[1];\n                var canvasOptions = arguments[2];\n                html2canvas(arguments[0],canvasOptions).then(function(canvas){\n                     \n                     if(Object.keys(dimensions).length == 4) {\n                        console.log(\"Success\");\n                        var croppedCanvas = document.createElement(\"canvas\");\n                        var context = canvas.getContext('2d');\n                        var croppedImage = context.getImageData(dimensions.x,dimensions.y,canvas.width,canvas.height);\n                        console.log(croppedImage)\n                        console.log(canvas.width,canvas.height);\n                        var croppedContext = croppedCanvas.getContext('2d');\n                        croppedCanvas.width = dimensions.width;\n                        croppedCanvas.height = dimensions.height;\n                        croppedContext.putImageData(croppedImage,0,0);\n                        callBack(croppedCanvas.toDataURL())\n                     } else {\n                        callBack(canvas.toDataURL())\n                     }\n                 })";
         return currentContext.executeScript("" + html2canvasScript).then(function () {
-            return currentContext.executeAsyncScript(injectionScript, element.getWebElement(), dimensions).then(function (base64String) {
+            return currentContext.executeAsyncScript(injectionScript, element.getWebElement(), dimensions, canvasOptions).then(function (base64String) {
                 base64String = base64String.replace(/^data:image\/png;base64,/, "");
                 if (outputPath) {
                     fs.writeFileSync(outputPath, base64String, 'base64');

lib/index.ts

@@ -11,6 +11,7 @@ interface configOptions {
  *  1. element(OPTIONAL) - to take screenshot of any particular element.
  *  2. dimensions(OPTIONAL) - to crop the screen shot based on x,y,width and height of the screnshot.
  *  3. saveTo(OPTIONAL) - file path to automatically save the processed screenshot.
+ *  4. canvasOptions(OPTIONAL) - options to pass to html2canvas
  */
 interface screenShotOptions {
     element?:ElementFinder;
@@ -20,7 +21,36 @@ interface screenShotOptions {
         width:number,
         height:number
     },
-    saveTo?:string
+    saveTo?:string,
+    canvasOptions?:canvasOptions
+}
+
+/**
+ *  Options that can to be passed as parameter to `html2canvas` method.
+ *  Refer to https://html2canvas.hertzen.com/configuration for usage
+ */
+
+interface canvasOptions {
+    allowTaint?: boolean,
+    backgroundColor?: string,
+    canvas?: HTMLCanvasElement,
+    foreignObjectRendering?: boolean,
+    imageTimeout?: number,
+    ignoreElements?: (element: Element) => boolean;
+    logging?: boolean,
+    onclone?: (document: Document) => void,
+    proxy?: string,
+    removeContainer?: boolean,
+    scale?: number,
+    useCORS?: boolean,
+    width?: number,
+    height?: number,
+    x?: number,
+    y?: number,
+    scrollX?: number,
+    scrollY?: number,
+    windowWidth?: number,
+    windowHeight?: number
 }
 
 let html2canvasPath = require.resolve("html2canvas").replace("/npm/index.js", "/html2canvas.min.js");
@@ -68,11 +98,13 @@ class ProtractorScreenShotUtils {
             element:ElementFinder = options.element ? options.element : currentContext.$("body"),
             dimensions = options.dimensions || {},
             outputPath = options.saveTo || null,
+            canvasOptions = options.canvasOptions || {},
             html2canvasScript = fs.readFileSync(html2canvasPath, 'utf8'),
             injectionScript =
                 `var callBack = arguments[arguments.length -1];
                 var dimensions = arguments[1];
-                html2canvas(arguments[0], {allowTaint : true, useCORS: true}).then(function(canvas){
+                var canvasOptions = arguments[2];
+                html2canvas(arguments[0],canvasOptions).then(function(canvas){
 
                      if(Object.keys(dimensions).length == 4) {
                         console.log("Success");
@@ -92,7 +124,7 @@ class ProtractorScreenShotUtils {
                  })`;
 
         return currentContext.executeScript(`${html2canvasScript}`).then(function () {
-            return currentContext.executeAsyncScript(injectionScript, element.getWebElement(), dimensions).then(function (base64String:string) {
+            return currentContext.executeAsyncScript(injectionScript, element.getWebElement(), dimensions, canvasOptions).then(function (base64String:string) {
                 base64String = base64String.replace(/^data:image\/png;base64,/, "");
 
                 /*if output path is given, then save the screenshot as file*/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "protractor-screenshot-utils",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A simple utility to capture fullpage screenshot, screenshot of any element and crop the screenshot by any screen coordinates from your e2e protractor tests out-of-box",
   "main": "dist/index.js",
   "scripts": {