diff --git a/README.md b/README.md index cbb8dd5..b0cc447 100644 --- a/README.md +++ b/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" + } +}); +``` + diff --git a/dist/index.d.ts b/dist/index.d.ts index 0cfe1c5..26c24ef 100644 --- a/dist/index.d.ts +++ b/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; diff --git a/dist/index.js b/dist/index.js index e0a065f..0f7b88f 100644 --- a/dist/index.js +++ b/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'); diff --git a/lib/index.ts b/lib/index.ts index b13e5db..118ec98 100644 --- a/lib/index.ts +++ b/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*/ diff --git a/package.json b/package.json index 0865d2e..256a007 100644 --- a/package.json +++ b/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": {