使用 html 到画布，使用 JavaScript 和 php 时图像渲染模糊

Question

我正在尝试使用以下代码将 html 元素转换为图像，但文本 int eh 图像得到一个模糊的文本。任何人都可以帮助我。这是代码

    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

您是否设置了画布的width 和height，我想这可能会导致“模糊”，例如：

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

canvas默认的width和height不是很大，或许你可以尝试设置大一点。