javascript - 使用 html 到 Canvas 、使用 JavaScript 和 php 时图像渲染模糊

Question

我正在尝试使用以下代码将 html 元素转换为图像，但是图像中的文本文本变得模糊。任何人都可以帮助我解决这个问题。这是代码

    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

您是否设置了 Canvas 的宽度和高度，我认为这可能会导致“模糊”，例如:

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

canvas默认的宽度和高度不是很大，也许你可以尝试将其设置得更大。