Take a screenshot element with Selenium?

Question

Does anyone know take a screenshot 1 element of webpage and convert it to base64 in javascript?

Answer 1

This is not my answer : Copied from here: How to capture the screenshot of a specific element rather than entire page using Selenium Webdriver?

In Node.js, I wrote the following code which works but it is not based on selenium's official WebDriverJS, but based on SauceLabs's WebDriver: WD.js and a very compact image library called EasyImage.

I just wanna emphasize that you cannot really take the screenshot of an element but what you should do is to first, take the screenshot of the whole page, then select the part of the page you like and crop that specific part:

browser.get(URL_TO_VISIT)
       .waitForElementById(dependentElementId, webdriver.asserters.isDisplayed, 3000)
       .elementById(elementID)
        .getSize().then(function(size) {
            browser.elementById(elementID)
                   .getLocation().then(function(location) {
                        browser.takeScreenshot().then(function(data) {
                            var base64Data = data.replace(/^data:image\/png;base64,/, "");
                            fs.writeFile(filePath, base64Data, 'base64', function(err) {
                                if (err) {
                                    console.log(err);
                                } 
                                else {
                                    cropInFile(size, location, filePath);
                                }
                                doneCallback();
                        });
                    });
                });
            }); 

And the cropInFileFunction, goes like this:

var cropInFile = function(size, location, srcFile) {
    easyimg.crop({
            src: srcFile,
            dst: srcFile,
            cropwidth: size.width,
            cropheight: size.height,
            x: location.x,
            y: location.y,
            gravity: 'North-West'
        },
        function(err, stdout, stderr) {
            if (err) throw err;
        });
};

Answer 2

var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().usingServer('http://localURL:4444/wd/hub').withCapabilities({'browserName': 'chrome'}).build();
//driver.get([URL to webserver on my local machine])
driver.findElement(webdriver.By.xpath('//img[@id="tree_image0358"]'));
driver.takeScreenshot("c:\\selenium_local_map\\out1.png");

driver.takeScreenshot().then(
    function(image, err) {
        require('fs').writeFile('out.png', image, 'base64', function(err {
            console.log(err);
        });
    }
);