javascript - Canvas compresses 64-bit coded images after synthesizing screenshots and uploading images

I am working on a mobile page. The requirements are: on a template image, the user can enter information in the input box, and then I take a screenshot of the page through the HTML2canvas plug-in, and then share the image. Since pictures cannot be placed on my company's publishing platform, this template picture is placed on my personal server. The link address of the picture is www.myself.com/aa.png. Then the link address of the page I made is www.gongsi.com/index.html. Then when taking a screenshot with canvas, the cross-domain picture will not be displayed after taking the screenshot, so I wrote a php interface on my server to transmit the picture to the front end through 64-bit code:
php code:

<code>$file="../img/p6.png";  
$type=getimagesize($file);//取得图片的大小，类型等  
$fp=fopen($file,"r")or die("Can't open file");  
$file_content=chunk_split(base64_encode(fread($fp,filesize($file))));//base64编码  
switch($type[2]){//判读图片类型  
case 1:$img_type="gif";break;  
case 2:$img_type="jpg";break;  
case 3:$img_type="png";break;  
}  
$img='data:image/'.$img_type.';base64,'.$file_content;//合成图片的base64编码  
fclose($fp); 
echo $_GET['callback'] . "(" . json_encode(array('img' => $img)) . ")";
</code>

After the front-end receives it, directly set the src attribute of the img tag:

<code>imgDiv.setAttribute("src", data.img);
</code>

At this time, the src attribute of the img tag is a bunch of 64-bit codes. The picture can be displayed normally, and then the screenshot is taken through HTML2canvas:

<code>html2canvas(screen,
                {    
                    width:$(".capture_screen").width(),
                    height:$(".capture_screen").height(),
                    canvas:canvas,
                    onrendered:function(canvas){    
                            sendImg(canvas.toDataURL());    //发送64位码到服务器                                            
                    }                                
                })    </code>

, and then the code received by the backend php is:

<code>define('UPLOAD_DIR', '../images/');
    $img = $_POST['img'];

    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    if($success)
    {
        $imgStatus = 1;
        echo json_encode(array('status' => '1', 'imgStatus' => $imgStatus, 'img' => $file)); //存储成功    
    }
    else
    {
        $imgStatus = -1;
        echo json_encode(array('status' => '-1', 'msg' => '存储失败')); //存储失败
    }</code>

The whole process is over. Then some of the pictures uploaded by users on the server are displayed normally, and some are compressed:

I would like to ask: What is the problem with image compression?

Reply content:

I am working on a mobile page. The requirement is: on a template picture, the user can enter information in the input box, and then I take a screenshot of the page through the HTML2canvas plug-in, and then share the picture. Since pictures cannot be placed on my company's publishing platform, this template picture is placed on my personal server. The link address of the picture is www.myself.com/aa.png. Then the link address of the page I made is www.gongsi.com/index.html. Then when taking a screenshot with canvas, the cross-domain picture will not be displayed after taking the screenshot, so I wrote a php interface on my server to transmit the picture to the front end through 64-bit code:
php code:

<code>$file="../img/p6.png";  
$type=getimagesize($file);//取得图片的大小，类型等  
$fp=fopen($file,"r")or die("Can't open file");  
$file_content=chunk_split(base64_encode(fread($fp,filesize($file))));//base64编码  
switch($type[2]){//判读图片类型  
case 1:$img_type="gif";break;  
case 2:$img_type="jpg";break;  
case 3:$img_type="png";break;  
}  
$img='data:image/'.$img_type.';base64,'.$file_content;//合成图片的base64编码  
fclose($fp); 
echo $_GET['callback'] . "(" . json_encode(array('img' => $img)) . ")";
</code>

After the front-end receives it, directly set the src attribute of the img tag:

<code>imgDiv.setAttribute("src", data.img);
</code>

At this time, the src attribute of the img tag is a bunch of 64-bit codes. The picture can be displayed normally, and then the screenshot is taken through HTML2canvas:

<code>html2canvas(screen,
                {    
                    width:$(".capture_screen").width(),
                    height:$(".capture_screen").height(),
                    canvas:canvas,
                    onrendered:function(canvas){    
                            sendImg(canvas.toDataURL());    //发送64位码到服务器                                            
                    }                                
                })    </code>

, and then the code received by the backend php is:

<code>define('UPLOAD_DIR', '../images/');
    $img = $_POST['img'];

    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    if($success)
    {
        $imgStatus = 1;
        echo json_encode(array('status' => '1', 'imgStatus' => $imgStatus, 'img' => $file)); //存储成功    
    }
    else
    {
        $imgStatus = -1;
        echo json_encode(array('status' => '-1', 'msg' => '存储失败')); //存储失败
    }</code>

The whole process is over. Then some of the pictures uploaded by users on the server are displayed normally, and some are compressed:

I would like to ask: What is the problem with image compression?