VERSIONS:
node v8.11.4
"express": "^4.16.3",
"jsdom": "^11.3.0",
"request": "^2.88.0",
CODE:
var express = require('express');
var app = express();
var router = express.Router();
var request = require('request');
var jsdom = require("jsdom/lib/old-api.js");
var page = request('https://www.ggole.com', function(err, resp, content) {
jsdom.env(
{
html: content,
done: function (err, window)
{
if (err) {console.log(err);}
var document = window.document;
document.body.appendChild(canvas);
var data = canvas.toDataURL();
window.close();
}
});
}
PROBLEM:
I would like to take a screenshot of google page. Is this possible with JSdom? Content of the page is in canvas tag so how to make a picture from it and send it to the user/edit it?
var data = canvas.toDataURL(); is not working as expected. Any help is appreciated.
may be it's late :)
jsdom uses nodejs canvas as the external dependency
their documentation say
Canvas support jsdom includes support for using the canvas package to
extend any elements with the canvas API. To make this work,
you need to include canvas as a dependency in your project, as a peer
of jsdom. If jsdom can find the canvas package, it will use it, but if
it's not present, then elements will behave like s.
Since jsdom v13, version 2.x of canvas is required; version 1.x is no
longer supported
and you can find examples how to use canvas here
https://www.npmjs.com/package/canvas
Related
SVG.js 3.0.5 has been released and i wanted to update my nodejs app, which is generating svgs using the library from 2.7 to 3.0.5.
To run this library with node.js you need to use svgdom (https://github.com/svgdotjs/svgdom)
The problem here is that the constructor changed and i can't figure out how to use it with node.js.
//previous method to initialize svgjs 2.7
const svgWindow = require('svgdom');
const SVGJS = require("svg.js")(svgWindow);
//with version 3.0.5 the package name changed
const svgWindow = require("svgdom");
const SVGJS = require("#svgdotjs/svg.js");
SVGJS(svgWindow); //is not a function error
I went through the source code and it looks like this should work
const window = require("svgdom");
const SVG = require("#svgdotjs/svg.js");
SVG.registerWindow(window, window.document);
I updated the readme so that it reflects the new use better:
npm install #svgdotjs/svg.js svgdom
// returns a window with a document and an svg root node
const window = require('../svgdom')
const document = window.document
const {SVG, registerWindow} = require('#svgdotjs/svg.js')
// register window and document
registerWindow(window , window.document)
// create canvas
const canvas = SVG(document.documentElement)
// use svg.js as normal
canvas.rect(100,100).fill('yellow').move(50,50)
// get your svg as string
console.log(canvas.svg())
// or
console.log(canvas.node.outerHTML)
Please note, that svg.js v3 does not export this big object anymore. Instead you have to require the functions you need. More information in the readme: https://github.com/svgdotjs/svgdom
i am new to scraping data from a website, i would like to scrape the level number from: https://fortnitetracker.com/profile/pc/Twitch.BadGuyBen, i have tried using cheerio and request for this task and im not sure if im using the right selector maybe some tips on what i should do. this is my code:
var request = require('request');
var cheerio = require('cheerio');
var options = {
url: `https://fortnitetracker.com/profile/pc/Twitch.BadGuyBen`,
method: 'GET'
}
request(options, function (error, response, body) {
var $ = cheerio.load(body);
var level = "";
var xp = "";
$('.top-stats').filter(function(){
var data = $(this);
level = data.children().first().find('.value').text();
console.log(level);
})
});
again i am not sure if i have even selected the right class much appreciated.
EDIT:
also '.top-stats' is present further on
website open in chrome dev tools
other .top-stats class
You can't use request to get the body since the stats are displayed using javascript. You will have to use something like puppeteer to request the page and execute the javascript and then scrape the stats.
The typical way to include the connect assets file is
!= css("main")
That is with .jade though. I am using handlebars and I have no clue how I can add the file?
I am using node-sass as well.
Just guessing, something like this works (see blog post):
var connectAssets = require("connect-assets")();
app.use(connectAssets);
var hbs = require('hbs');
hbs.registerHelper('css', function() {
var css = connectAssets.options.helperContext.css.apply(this, arguments);
return new hbs.SafeString(css);
});
I'm having a small issue with rendering HTML, stored in CouchBase, fetched by Node.js
In CouchBase I have several small HTML-snippets. They contain text, tags such as <br /> and html entities such as <. They are of course stored as an escaped string in JSON.
So far, so good. However when I pull it out and display on the page, it is rendered "as-is", without being interpreted as HTML.
For example:
[ some content ...]
<p>Lorem is > ipsum<br />And another line</p>
[rest of content ...]
From the controller in Express 4:
var express = require('express');
var router = express.Router();
var couchbase = require('couchbase');
var cluster = new couchbase.Cluster('couchbase://myserver');
var bucket = cluster.openBucket('someBucket', 'somePassword');
var Entities = require('html-entities').XmlEntities;
entities = new Entities();
var utf8 = require('utf8');
/* GET home page. */
router.get('/', function(req, res) {
bucket.get('my:thingie:44', function(err, result) {
if(err) throw err
console.log(result);
var html = utf8.decode(entities.decode(result.value.thingie.html));
// var html = utf8.encode(result.value.thingie.html);
// var html = utf8.decode(result.value.thingie.html);
res.render('index', { title: 'PageTitle', content: html });
});
});
It is then passed to the template (using hogan.js) for rendering.
When looking into this I found that it might have something to do with the encoding of the <'s and <'s that prevent it from being parsed. You can see my converting attempts in the code, where none of the options gave the desired result, i.e. rendering the contents as HTML.
When using utf8.decode(), no difference.
Using utf8.encode(), no difference.
Using entities.decode() it convert < into < as predicted, but it's not rendered even if <div;> becomes <div>.
Any ideas?
I found the solution over here: Partials with Node.js + Express + Hogan.js
When putting HTML in a Hogan template, you have to use {{{var}}} instead of {{var}}.
And thus it renders beautifully, as intended :)
Wasn't encoding issues at all ;)
I'd like to override the View class in the Express framework, used in Node.js. I want to augment the lookup method, but I can't see a way to do this without altering the Express and App modules. I'd favour deriving from the Express framework, but I can't figure out a neat way to do this.
Any ideas?
Thanks
It seems to me you should be able to:
var View = require('express/lib/view');
// Keep reference to original lookup method
var _lookup = View.prototype.lookup;
// Override lookup method
View.prototype.lookup = function (path) {
// Your implementation here
};
Update:
Run this as a demonstration:
var View = require('express/lib/view');
var _lookup = View.prototype.lookup;
var express = require('express');
View.prototype.lookup = function (path) {
console.log('LOOKUP!!! ' + path);
return _lookup.call(this, path);
};
var app = express();
app.get('/', function (req, res) {
res.render('foo.jade');
});
app.listen(3000);
Run
node app & sleep 1 && curl localhost:3000
I hope this will demonstrate the viability of this way of overriding a method.
It depends on which version of Express you are using.
You can easily augment the view lookup code only if your app is using Express prior to version 3
Since Express 3.0 that's not doable anymore.
You can check one of my old related answers for sample code:
Multiple View paths on Node.js + Express