javascript - Canvas komprimiert 64-Bit-codierte Bilder nach der Synthese von Screenshots und dem Hochladen von Bildern-PHP-Tutorial-php.cn

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

WBOY

Freigeben： 2016-08-08 09:06:49

Original

1127 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Der gesamte Vorgang ist beendet. Einige der von Benutzern auf den Server hochgeladenen Bilder werden normal angezeigt, andere werden komprimiert: javascript - Canvas komprimiert 64-Bit-codierte Bilder nach der Synthese von Screenshots und dem Hochladen von Bildern

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

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

Antwortinhalt:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Auf diese Weise ist der gesamte Vorgang abgeschlossen. Dann werden einige der von Benutzern auf den Server hochgeladenen Bilder normal angezeigt, andere werden komprimiert: javascript - Canvas komprimiert 64-Bit-codierte Bilder nach der Synthese von Screenshots und dem Hochladen von Bildern

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

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