Create base64 string from HTML

Question

I need to make screenshot from specific DIV in HTML page. I tried to use this library - http://html2canvas.hertzen.com/

html2canvas($(".element"), {
    onrendered: function(canvas) {
        console.log(canvas.toDataURL('image/jpeg'));
    }
});

But it has problems with some CSS stuff ( text-shadow for example ) and some texts are not looking good. and also picture seems a bit blurry.

Is there any other solution?

My DIV contains background picture, and texts on it. I considered using PHP GD library to open that background image and position texts on it, but there comes the text-shadow again, which i don't know how to do.

The CSS which makes text-shadow is like this:

text-shadow: 0px 1px 0px rgba(0,0,0,0.2);

When you say the picture "seems a bit blurry" - you are converting it to jpeg without specifying the the quality. Have you tried `canvas.toDataURL('image/jpeg', 1);`? - quality parameter ranges from 0 to 1, not sure what the default is but it will be something near 0.8 (lossy). — Emissary, Jul 25 '13 at 12:22

score 0 · Answer 1 · answered Jul 25 '13 at 12:24

0

I did something like this a few months ago. I used this library :

http://www.nihilogic.dk/labs/canvas2image/

It's easy to use and did the job. I hope it helps.

answered Jul 25 '13 at 12:24

David

453
3
14

score 0 · Answer 2 · answered Jul 25 '13 at 12:31

html2canvas doesn't really take an actual screenshot, but recreates the look of the html element using canvas. That is why it doesn't look exaclty right (the shadow etc.).

The blurriness is most likely due to you saving the image as a jpeg, try png instead:

canvas.toDataURL('image/png')

score 0 · Accepted Answer · answered Jul 25 '13 at 12:36

0

HTML5 Canvas has support for text shadowing http://www.html5rocks.com/en/tutorials/canvas/texteffects/

The library you're using probably just doesn't support it properly or it isn't searching for the CSS.

If you share the DIV markup and CSS a hardcoded (specific) solution could probably be reached.

Another way to go is using a screen shot web service like http://browsershots.org

You would create a minimal HTML file that just contains the CSS and the DIV you want and save it (with PHP) to your web directory. You'd then pass that url to the web service and get an image (screen shot) in response.

answered Jul 25 '13 at 12:36

Louis Ricci

20,804
5
48
62

Maybe i will try to recreate that DIV on canvas myself and then parse it to .toDataURL(); – DoubleT Jul 25 '13 at 12:51
I finally made it a bit different way. I made custom canvas and filled it with data which i got from AJAX. Canvas supports all shading and stuff. $('#bigCard').html($('')); var canvas = $("#anniversary")[0]; var context = canvas.getContext('2d'); var base_image = new Image(); base_image.src = 'gifts/img/bigcard/bigCard100.png'; context.drawImage(base_image, 0, 0); //here i put all the texts on picture – DoubleT Jul 25 '13 at 14:09
@user1199899 - glad you got to a solution – Louis Ricci Jul 25 '13 at 14:11

Create base64 string from HTML

3 Answers3