Node generate image from DOM - javascript

I want to generate image or blob from DOM element on nodejs. Since node doesn't have DOM to handle I'm creating one from JSDOM. My initial plan was to use dom-to-image library but it spitting errors:
(node:10384) UnhandledPromiseRejectionWarning: SyntaxError: The string did not match the expected pattern.
at XMLHttpRequest.open (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:480:15)
at about:blank:2:5649
at new Promise (<anonymous>)
at j (about:blank:2:5177)
(node:10384) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:10384) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Second plan was to generate canvas by: html2canvas and save it as blob. That also failed by generating:
Error: Not implemented: window.scrollTo
at module.exports (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at /home/webdev/servers/web/node_modules/jsdom/lib/jsdom/browser/Window.js:579:7
at about:blank:6:156607 undefined
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
at module.exports (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at HTMLCanvasElementImpl.getContext (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
at HTMLCanvasElement.getContext (/home/webdev/servers/web/node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:41:47)
at A.value (about:blank:6:43814)
at new A (about:blank:6:134500)
at about:blank:6:63123 undefined
(node:11033) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'scale' of null
(node:11033) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:11033) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
window.scrollTo can be overwritten but canvas is more tricky. There is all sorts of errors including canvas in JSDOM
Rolling fix for it:
https://github.com/jsdom/jsdom/pull/1964
Also I was thinking about using puppeteer as my Virtual DOM since it uses headless chrome but that seems overkill and also can generate errors because you're running separate browser. (I can't even run headless chrome because of errors mentioning no sandbox available).
My question is. Is it even possible to generate image from DOM on server side of nodejs framework?
Project information:
Node version - 10.11.0
Framework - nestjs latest
JSDOM - 12.2.0
html2image - 1.0.0-alpha.12
dom-to-image - 2.6.0

Related

error and problems after upgrading quasar

fellow devs,
I have a quasar project that I have recently (stupidly) upgraded to the latest version to test it with vue 3. unfortunately my app does not launch and I get the following
(node:7976) UnhandledPromiseRejectionWarning: TypeError: Merging undefined is not supported
index.js:63 mergeWithOptions
[StayFit]/[webpack-merge]/dist/index.js:63:19
index.js:52 merge
[StayFit]/[webpack-merge]/dist/index.js:52:35
quasar-conf-file.js:392 QuasarConfFile.compile
[StayFit]/[#quasar]/app/lib/quasar-conf-file.js:392:29
task_queues.js:95 processTicksAndRejections
internal/process/task_queues.js:95:5
quasar-dev:237 async goLive
[StayFit]/[#quasar]/app/bin/quasar-dev:237:3
(Use node --trace-warnings ... to show where the warning was created)
(node:7976) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:7976) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
I have tried to roll back quasar version or uninstall it and reinstall a certain version but still the same issue.
any solution there?

make x ERR not found: make-.env running make mocked on Windows 10

I am trying to run this locally on my Windows 10 machine:
https://github.com/pactflow/example-consumer-cypress
I have installed npm on the root directory then run make mocked.
However, I get the following error message:
UnhandledPromiseRejectionWarning: undefined
(node:9928) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:9928) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
make × ERR not found: make-.env
I tried this command as well and same error: make mocked --debug --unhandled-rejections=strict
I also entered a dummy .env and make-.env files on the root directory but same error.
Furthermore, the Makefile exists on the root directory as I just downloaded the repo to my local machine.
For some reason, I am unable to find the exact error via Stackoverflow or Google. Unsure if this is related to my Windows machine, the Pact tool I am trying to configure, or on the make package itself as I am quite unfamiliar with mocking.
I also reached out to the Pact team and they mentioned that it should work locally and it might be related to windows path length issues but the solution didn't work either: https://github.com/pact-foundation/pact-node/blob/master/README.md#enable-long-paths

Puppeteer cluster example throwing Error: Unable to get browser page

I'm using this example in the puppeteer-cluster docs
I am running this on node v10.15.3 I have attempted passing the headless property and slowMo to puppeteer options.
I would expect the code to log out and create a Screenshot of the page however, what happens is several chrome instances boot up which do not load any of the pages then the console hangs and errors with:
(node:30826) UnhandledPromiseRejectionWarning: Error: Unable to get browser page
at Worker.<anonymous> (/Users/Starlord/Code/oppose/node_modules/puppeteer-cluster/dist/Worker.js:43:31)
at Generator.next (<anonymous>)
at fulfilled (/Users/Starlord/Code/oppose/node_modules/puppeteer-cluster/dist/Worker.js:4:58)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:30826) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 21)
(node:30826) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:30826) UnhandledPromiseRejectionWarning: Error: Unable to get browser page
at Worker.<anonymous> (/Users/Starlord/Code/oppose/node_modules/puppeteer-cluster/dist/Worker.js:43:31)
at Generator.next (<anonymous>)
at fulfilled (/Users/Starlord/Code/oppose/node_modules/puppeteer-cluster/dist/Worker.js:4:58)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:30826) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 22)
^Cinternal/process/per_thread.js:198
throw errnoException(err, 'kill');
^
Error: kill ESRCH
at process.kill (internal/process/per_thread.js:198:13)
at process.killChrome (/Users/Starlord/Code/oppose/node_modules/puppeteer/lib/Launcher.js:110:17)
at process.emit (events.js:189:13)
This error happens when the library is unable to create a new browser page. The error is thrown here after several tries of opening a new context/page/browser (depending on your settings).
Debugging log
To get more information on what causes the error, you can check the debugging log. This starts the application in debugging mode and will log more information. To enter debugging mode you need to start the application with the environment variable DEBUG='puppeteer-cluster:*':
# Linux
DEBUG='puppeteer-cluster:*' node application.js
# Windows Powershell
$env:DEBUG='puppeteer-cluster:*';node application.js
Problem
In your case the debug logs shows (copied from your comment above):
puppeteer-cluster: Worker Error getting browser page (try: 9), message: this.browser.createIncognitoBrowserContext is not a function +660ms
This means, there is no createIncognitoBrowserContext that the library can use to create a new context. As you already confirmed, this is the case, because you are using an old puppeteer installation. To use the setting { concurrency: Cluster.CONCURRENCY_CONTEXT }, you have to be using at least version 1.5.0 as that was when contexts were introduced.
Fix
To fix the problem, update your puppeteer installation:
npm install puppeteer#latest
The problem was that I was using puppeteer-pool before puppeteer-cluster which uses an older version of puppeteer.
I removed puppeteer-pool and installed puppeteer and it works as expected

adding text to pictures js using jimp

I got a picture file that I want to add text in specified locations, I thought of using jimp, so I turned my .ttf into .fnt in order to use it with jimp and I get this error:
Error: no named row at line 1
at splitLine (C:\\\node_modules\parse-bmfont-ascii\index.js:49:11)
at parseBMFontAscii (C:\Users\\node_modules\parse-bmfont-ascii\index.js:18:20)
at C:\Users\\node_modules\load-bmfont\index.js:39:18
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
(node:11892) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:11892) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
I couldn't find any watermark module that have a font option as well, any advice on that?

Selenium with NodeJS - the driver object loses context when returning from TinyMCE iframe

First, I login on a separate page to have access to the page with the form.
After logging in correctly and after switching to the page with the form, I have access to all its elements and I can freely edit them. One of the form element is the TinyMCE iframe.
After entering the iframe and modifying it, I don't know how to return to the native form and click on submit...
Here is my code (my.js):
const loginUrl = 'https://www.example.com/login';
const formUrl = 'https://www.example.com/form';
const {Builder, By, until} = require('selenium-webdriver');
const driver_ch = new Builder().forBrowser('chrome').build();
driver_ch.manage().window().maximize();
driver_ch.get(loginUrl);
const loginLink = driver_ch.wait(until.elementLocated(By.css('#login-box')), 20000);
loginLink.click().then(function() {
driver_ch.wait(until.elementLocated(By.css('#login'))).sendKeys('user_name');
driver_ch.wait(until.elementLocated(By.css('#password'))).sendKeys('secret_password');
driver_ch.wait(until.elementLocated(By.css('#submit-login'))).click();
}).then(function() {
driver_ch.wait(until.elementLocated(By.css('.form-action'))).then(function() {
driver_ch.get(formUrl);
driver_ch.switchTo().frame(driver_ch.findElement(By.id("edit-body-und-0-value_ifr")));
driver_ch.wait(until.elementLocated(By.id('tinymce'))).sendKeys('Glory! Glory! Hallelujah!');
Until now everything work, but this not:
driver_ch.switchTo().defaultContent();
and this also not:
driver_ch.switchTo().parentFrame();
so this could not be done...
driver_ch.findElement(By.css('#edit-submit')).click();
});
});
Error messege after runing my.js script:
node my.js
(node:3955) UnhandledPromiseRejectionWarning: StaleElementReferenceError: stale element reference: element is not attached to the page document
(Session info: chrome=74.0.3729.169)
(Driver info: chromedriver=2.41.578700 (2f1ed5f9343c13f73144538f15c00b370eda6706),platform=Linux 4.9.0-9-amd64 x86_64)
at Object.checkLegacyResponse (/home/user1/test/node_modules/selenium-webdriver/lib/error.js:585:15)
at parseHttpResponse (/home/user1/test/node_modules/selenium-webdriver/lib/http.js:554:13)
at Executor.execute (/home/user1/test/node_modules/selenium-webdriver/lib/http.js:489:26)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:3955) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:3955) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Changing the driver from Chrome to FireFox did not solve the problem.
Edited:
Thank you #DebanjanB for your suggestions in your answer.
I have updated the Chrome browser and Chrome driver as you suggested, but unfortunately it still doesn't work...
I get this error message now:
node my.js
(node:24587) UnhandledPromiseRejectionWarning: StaleElementReferenceError: stale element reference: element is not attached to the page document
(Session info: chrome=78.0.3904.70)
at Object.throwDecodedError (/home/user1/test/node_modules/selenium-webdriver/lib/error.js:550:15)
at parseHttpResponse (/home/user1/test/node_modules/selenium-webdriver/lib/http.js:563:13)
at Executor.execute (/home/user1/test/node_modules/selenium-webdriver/lib/http.js:489:26)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:24587) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promis
e which was not handled with .catch(). (rejection id: 1)
(node:24587) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zer
o exit code.
This error message...
node my.js
(node:3955) UnhandledPromiseRejectionWarning: StaleElementReferenceError: stale element reference: element is not attached to the page document
(Session info: chrome=74.0.3729.169)
(Driver info: chromedriver=2.41.578700 (2f1ed5f9343c13f73144538f15c00b370eda6706),platform=Linux 4.9.0-9-amd64 x86_64)
at Object.checkLegacyResponse (/home/user1/test/node_modules/selenium-webdriver/lib/error.js:585:15)
at parseHttpResponse (/home/user1/test/node_modules/selenium-webdriver/lib/http.js:554:13)
at Executor.execute (/home/user1/test/node_modules/selenium-webdriver/lib/http.js:489:26)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:3955) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:3955) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
...implies that the ChromeDriver was unable to interact with the desired element i.e. the defaultContent / parentFrame.
I don't see any major issue in your code trials. However your main issue seems to be incompatibility between the version of the binaries you are using as follows:
You are using chromedriver=2.41
Release Notes of chromedriver=2.41 clearly mentions the following :
Supports Chrome v67-69
You are using chrome= chrome=74.0
Release Notes of ChromeDriver v74.0.3729.6 clearly mentions the following :
Supports Chrome v74
So there is a clear mismatch between the ChromeDriver v2.41 and the Chrome Browser v74.0
Solution
Ensure that:
ChromeDriver is updated to current ChromeDriver v78.0 level.
Chrome is updated to current Chrome Version 78.0 level. (as per ChromeDriver v78.0 release notes)
Clean your Project Workspace through your IDE and Rebuild your project with required dependencies only.
If your base Web Client version is too old, then uninstall it and install a recent GA and released version of Web Client.
Take a System Reboot.
Execute your #Test.

Categories