CODEWITHSUNDEEP
htmlfacebookimage
Matt
Matt

Reputation: 334

How can I convert html to an image to share on facebook, twitter, email, or anything similar

I have a div on my webpage and a share button. When I click the share button I want to be able to share the contents of that div. I want to do this by posting an image of that div. Is there any easy way to convert html to an image that can then be shared.

Upvotes: 2

Views: 1636

Answers (1)

kamelkev
kamelkev

Reputation: 1156

As another poster responded, you would need to convert the rendering on screen using a canvas element. However said poster is incorrect in that this is difficult, it's actually very easy by using the html2canvas javascript library.

You can read more about it here: https://html2canvas.hertzen.com/

The project github is located here: https://github.com/niklasvh/html2canvas

html2canvas allows you to convert any div on a given page into an image. Once the image data is stored you can submit it or do whatever you want.

It's shockingly easy to use, for example:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

The above code takes a snapshot of an entire document and appends it to the bottom of said document. It's a terse clunky example, but you get the idea on how easy it is to use.

Upvotes: 2

Related Questions