DOM-to-Image … turn a DOM node into an image

15. March 2017

dom-to-image is a library which can turn an arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript.

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

var node = document.getElementById('my-node');

domtoimage.toPng(node)

.then(function (dataUrl) {

var img = new Image();

img.src = dataUrl;

document.body.appendChild(img);

})

.catch(function (error) {

console.error('oops, something went wrong!', error);

});

GitHub

More uptodate and faster than html2canvas, which I used before in a couple of projects.

0 Comments

Inline Feedbacks

View all comments

Alexander

I am a full-stack developer. My expertise include:

Server, Network and Hosting Environments
Data Modeling / Import / Export
Business Logic
API Layer / Action layer / MVC
User Interfaces
User Experience
Understand what the customer and the business needs

I love programming, design and know my way around server architecture as well. I would never feel complete, with one of these missing.

I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.

Apart from that, I am a peace loving guy who tries to have people around him that think the same. I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Services

Previous Next