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

您是否设置了画布width和height，我想这可能导致模糊＆＃39;，如：

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

画布的默认width和height不是很大，也许您可以尝试将其设置得更大。

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

1 个答案: