image rendering blurry when using html to canvas, using JavaScript and php

Question

I am trying ot convert html elements to image using the following code, but text int eh image getting an blurry text. any one can help me on this., here is the code

    setTimeout( function(){
        //get the div content
        div_content = document.querySelector("#container_inc");
        html2canvas(div_content).then(function(canvas) {
            //change the canvas to jpeg image
            data = canvas.toDataURL('image/jpeg');
        $.post('<?php echo base_url()?>index.php/mailsend/save_jpg', {data: data}, function(res)
        {});
        context.clearRect(0, 0, canvas.width, canvas.height);
        });
    }  , 2000 );

    $email_bodymsg = '';
    $imgname = $this->session->userdata("sess_imgname");
    echo $email_bodymsg = '<div><img src="http://xxx.xxx.xxx.xx/sample/user-image/'.$imgname.'.jpg" ></div>';



public function save_jpg()
    {
        $random ='Main-Data-Dashboard'.rand(100, 1000);
        $this->session->set_userdata("sess_imgname", $random);
        $savefile = file_put_contents("assets/user-image/$random.jpg", base64_decode(explode(",", $_POST['data'])[1]));

        if($savefile){
            echo $random;
        }
    }

Possible duplicate of [HTML5 canvas stroke() thick and fuzzy](https://stackoverflow.com/questions/3991113/html5-canvas-stroke-thick-and-fuzzy) — Blindman67, Jul 14 '17 at 08:15

score 2 · Accepted Answer · answered Jul 14 '17 at 05:01

2

Did you set the canvas's width and height, I think maybe this cause the 'blurry',like:

<canvas width='1920' height='1080'></canvas>

canvas's default width and height is not very big, maybe you can try to set it bigger.

answered Jul 14 '17 at 05:01

gy134340

566
5
19

image rendering blurry when using html to canvas, using JavaScript and php

1 Answers1