feat: add overlay support

Author: Kikobeats

README.md

@@ -375,21 +375,22 @@ Scroll to the DOM element matching the given [CSS selector](https://developer.mo
 
 ![](https://i.imgur.com/vR0M3qt.png)
 
-type: `boolean` | `object`
+type: `object`
 
-After the screenshot has been taken, this option allows you to place the screenshot with an overlay.
+After the screenshot has been taken, this option allows you to place the screenshot into a fancy overlay
 
 You can configure the overlay specifying:
 
-- **path**: The image path to use to put on top of the screenshot.
-- **color**: The hexadecimal background color to use (default is `'transparent'`).
+- **browser**: It sets the browser image overlay to use. Supported values: `safari-light`,` safari-dark`.
+- **background**: It sets the background color to use. You can pass a hexadecimal/rgb/rgba or a CSS gradient.
 
 ```js
 ;(async () => {
   const buffer = await browserless.screenshot(url.toString(), {
     hideElements: ['.crisp-client', '#cookies-policy'],
     overlay: {
-      color: '#F76698'
+      browser: 'safari-dark',
+      background: 'linear-gradient(45deg, rgba(255,18,223,1) 0%, rgba(69,59,128,1) 66%, rgba(69,59,128,1) 100%)'
     }
   })
 })()

packages/examples/src/screenshot.js

@@ -8,8 +8,9 @@ require('./main')(async url => {
   const buffer = await browserless.screenshot(url.toString(), {
     hideElements: ['.crisp-client', '#cookies-policy'],
     overlay: {
-      browser: 'dark',
-      color: '#6791B6'
+      browser: 'safari-dark',
+      background:
+        'linear-gradient(45deg, rgba(255,18,223,1) 0%, rgba(69,59,128,1) 66%, rgba(69,59,128,1) 100%)' // '#f00'
     }
   })
 

packages/screenshot/package.json

@@ -28,9 +28,9 @@
   ],
   "dependencies": {
     "@browserless/goto": "^5.5.5",
-    "hex-rgb": "~4.1.0",
     "is-url-http": "~1.2.0",
-    "sharp": "~0.22.1"
+    "sharp": "~0.22.1",
+    "svg-gradient": "~1.0.0"
   },
   "engines": {
     "node": ">= 8"

packages/screenshot/src/browser/dark.png renamed to packages/screenshot/src/browser/safari-dark.png

@@ -1,12 +1,12 @@
 'use strict'
 
+const svgGradient = require('svg-gradient')
 const goto = require('@browserless/goto')
 const isUrl = require('is-url-http')
-const hexRgb = require('hex-rgb')
 const sharp = require('sharp')
 const path = require('path')
 
-const browserOverlay = ['light', 'dark'].reduce(
+const browserOverlay = ['safari-light', 'safari-dark'].reduce(
   (acc, key) => ({
     ...acc,
     [key]: path.resolve(__dirname, `browser/${key}.png`)
@@ -101,19 +101,7 @@ const doRemoveElements = elements => {
   }
 }
 
-const getOverlayColors = color => {
-  let r = 0
-  let g = 0
-  let b = 0
-
-  try {
-    ;({ red: r, green: g, blue: b } = hexRgb(color))
-  } catch (e) {
-    color = 'transparent'
-  }
-
-  return [r, g, b]
-}
+const createBackground = css => Buffer.from(svgGradient(css, { width: '1388px', height: '955px' }))
 
 const getInjectKey = (ext, value) =>
   isUrl(value) ? 'url' : value.endsWith(`.${ext}`) ? 'path' : 'content'
@@ -195,15 +183,22 @@ module.exports = page => async (url, opts = {}) => {
   const screenshot = await page.screenshot({ type, ...args })
   if (!overlay) return screenshot
 
-  const { browser: overlayBrowser = 'light', color: overlayColor = 'transparent' } = overlay
+  let { browserTheme, background = 'transparent' } = overlay
 
-  let image = await sharp(browserOverlay[overlayBrowser]).composite([{ input: screenshot }])
+  if (!background.includes('gradient')) {
+    background = `linear-gradient(45deg, ${background} 0%, ${background} 100%)`
+  }
+
+  let image = await sharp(Buffer.from(createBackground(background)))
+  let inputs = [{ input: screenshot }]
 
-  if (overlayColor !== 'transparent') {
-    const [r, g, b] = getOverlayColors(overlayColor)
-    image = await image.flatten({ background: { r, g, b, alpha: 1 } })
+  if (browserTheme) {
+    const input = browserOverlay[browserTheme]
+    if (input) inputs = [{ input }].concat(inputs)
   }
 
+  image = await image.composite(inputs)
+
   const buffer = await image.toBuffer()
   return buffer
 }