CODEWITHSUNDEEP
javascriptphphtmlcanvas
Praveen sivadasan
Praveen sivadasan

Reputation: 175

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

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;
        }
    }

Upvotes: 1

Views: 905

Answers (1)

gy134340
gy134340

Reputation: 596

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.

Upvotes: 2

Related Questions