javascript - Canvas komprimiert 64-Bit-codierte Bilder nach der Synthese von Screenshots und dem Hochladen von Bildern

Ich arbeite an einer mobilen Seite. Die Anforderungen sind: Auf einem Vorlagenbild kann der Benutzer Informationen in das Eingabefeld eingeben, und dann mache ich über das HTML2canvas-Plug-in einen Screenshot der Seite und teile ihn dann Bild. Da Bilder nicht auf der Veröffentlichungsplattform meines Unternehmens platziert werden können, wird dieses Vorlagenbild auf meinem persönlichen Server platziert. Die Linkadresse des Bildes lautet www.myself.com/aa.png. Dann lautet die Linkadresse der von mir erstellten Seite www.gongsi.com/index.html. Wenn ich dann einen Screenshot mit Canvas mache, wird das domänenübergreifende Bild nach der Aufnahme des Screenshots nicht angezeigt. Deshalb habe ich auf meinem Server eine PHP-Schnittstelle geschrieben, um das Bild über 64-Bit-Code an das Frontend zu übertragen:
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>

Nachdem das Front-End es empfangen hat, legt es direkt das src-Attribut des img-Tags fest:

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

Zu diesem Zeitpunkt besteht das src-Attribut des img-Tags aus einer Reihe von 64-Bit-Codes. Das Bild kann normal angezeigt werden, und dann wird der Screenshot über HTML2canvas aufgenommen:

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

, und dann lautet der vom Backend-PHP empfangene Code:

<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>

Der gesamte Vorgang ist beendet. Einige der von Benutzern auf den Server hochgeladenen Bilder werden normal angezeigt, andere werden komprimiert:

Ich möchte fragen: Was ist das Problem mit der Bildkomprimierung?

Antwortinhalt:

Ich arbeite an einer mobilen Seite. Die Anforderungen sind: Auf einem Vorlagenbild kann der Benutzer Informationen in das Eingabefeld eingeben, und dann mache ich über das HTML2canvas-Plug-in einen Screenshot der Seite und teile ihn dann Bild. Da Bilder nicht auf der Veröffentlichungsplattform meines Unternehmens platziert werden können, wird dieses Vorlagenbild auf meinem persönlichen Server platziert. Die Linkadresse des Bildes lautet www.myself.com/aa.png. Dann lautet die Linkadresse der von mir erstellten Seite www.gongsi.com/index.html. Wenn ich dann einen Screenshot mit Canvas mache, wird das domänenübergreifende Bild nach der Aufnahme des Screenshots nicht angezeigt. Deshalb habe ich auf meinem Server eine PHP-Schnittstelle geschrieben, um das Bild über 64-Bit-Code an das Frontend zu übertragen:
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>

Nachdem das Front-End es empfangen hat, legt es direkt das src-Attribut des img-Tags fest:

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

Zu diesem Zeitpunkt besteht das src-Attribut des img-Tags aus einer Reihe von 64-Bit-Codes. Das Bild kann normal angezeigt werden, und dann wird der Screenshot über HTML2canvas aufgenommen:

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

, und dann lautet der vom Backend-PHP empfangene Code:

<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>

Auf diese Weise ist der gesamte Vorgang abgeschlossen. Dann werden einige der von Benutzern auf den Server hochgeladenen Bilder normal angezeigt, andere werden komprimiert:

Ich möchte fragen: Was ist das Problem mit der Bildkomprimierung?