javascript - canvas對64位碼圖片合成截屏上傳圖片後壓縮問題

我在做的一個手機端頁面，需求是：在一張模板圖片上，使用者可以在輸入框裡輸入資訊，然後我通過HTML2canvas外掛程式對頁面截屏，然後把圖片分享出去。由於我公司的發布平台上不能放圖片，所以這張模板圖片放到我個人的伺服器上，圖片的連結地址是www.myself.com/aa.png。然後我做的頁面的連結地址是www.gongsi.com/index.html。然後在用canvas截屏的時候，跨域的圖片截屏後不會被顯示，所以我就在我伺服器上寫了個php介面，把圖片通過64位碼傳到前端：
php代碼：

$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)) . ")";

前端接收後直接設定img標籤src屬性：

imgDiv.setAttribute("src", data.img);

這個時候的img標籤的src的屬性就是一堆64位碼，圖片可以正常顯示，然後通過HTML2canvas截屏：

html2canvas(screen,                {                        width:$(".capture_screen").width(),                    height:$(".capture_screen").height(),                    canvas:canvas,                    onrendered:function(canvas){                                sendImg(canvas.toDataURL());    //發送64位碼到伺服器                                                                }                                                })    

，然後後端php接收的代碼是：

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' => '儲存失敗')); //儲存失敗    }

這樣整個過程就結束了，然後在伺服器上使用者上傳的圖片，有的顯示正常，有的是圖片被壓縮：

想請教一下:圖片壓縮是哪裡的問題呢？

回複內容：

我在做的一個手機端頁面，需求是：在一張模板圖片上，使用者可以在輸入框裡輸入資訊，然後我通過HTML2canvas外掛程式對頁面截屏，然後把圖片分享出去。由於我公司的發布平台上不能放圖片，所以這張模板圖片放到我個人的伺服器上，圖片的連結地址是www.myself.com/aa.png。然後我做的頁面的連結地址是www.gongsi.com/index.html。然後在用canvas截屏的時候，跨域的圖片截屏後不會被顯示，所以我就在我伺服器上寫了個php介面，把圖片通過64位碼傳到前端：
php代碼：

$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)) . ")";

前端接收後直接設定img標籤src屬性：

imgDiv.setAttribute("src", data.img);

這個時候的img標籤的src的屬性就是一堆64位碼，圖片可以正常顯示，然後通過HTML2canvas截屏：

html2canvas(screen,                {                        width:$(".capture_screen").width(),                    height:$(".capture_screen").height(),                    canvas:canvas,                    onrendered:function(canvas){                                sendImg(canvas.toDataURL());    //發送64位碼到伺服器                                                                }                                                })    

，然後後端php接收的代碼是：

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' => '儲存失敗')); //儲存失敗    }

這樣整個過程就結束了，然後在伺服器上使用者上傳的圖片，有的顯示正常，有的是圖片被壓縮：

想請教一下:圖片壓縮是哪裡的問題呢？

