使用html画布，使用JavaScript和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;
        }
    }

Answer 1

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.