<body>
我在做的一个手机端页面，需求是：在一张模板图片上，用户可以在输入框里输入信息，然后我通过HTML2canvas插件对页面截屏，然后把图片分享出去。由于我公司的发布平台上不能放图片，所以这张模板图片放到我个人的服务器上，图片的链接地址是www.myself.com/aa.png。然后我做的页面的链接地址是www.gongsi.com/index.html。然后在用canvas截屏的时候，跨域的图片截屏后不会被显示，所以我就在我服务器上写了个php接口，把图片通过64位码传到前端：
php代码：
<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>
前端接收后直接设置img标签src属性：
<code>imgDiv.setAttribute("src", data.img);</code>
这个时候的img标签的src的属性就是一堆64位码，图片可以正常显示，然后通过HTML2canvas截屏：
<code>html2canvas(screen, { width:$(".capture_screen").width(), height:$(".capture_screen").height(), canvas:canvas, onrendered:function(canvas){ sendImg(canvas.toDataURL()); //发送64位码到服务器 } }) </code>
，然后后端php接收的代码是：
<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>
这样整个过程就结束了，然后在服务器上用户上传的图片，有的显示正常，有的是图片被压缩：
想请教一下:图片压缩是哪里的问题呢？
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
回复内容：
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<body>
我在做的一个手机端页面，需求是：在一张模板图片上，用户可以在输入框里输入信息，然后我通过HTML2canvas插件对页面截屏，然后把图片分享出去。由于我公司的发布平台上不能放图片，所以这张模板图片放到我个人的服务器上，图片的链接地址是www.myself.com/aa.png。然后我做的页面的链接地址是www.gongsi.com/index.html。然后在用canvas截屏的时候，跨域的图片截屏后不会被显示，所以我就在我服务器上写了个php接口，把图片通过64位码传到前端：
php代码：
<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>
前端接收后直接设置img标签src属性：
<code>imgDiv.setAttribute("src", data.img);</code>
这个时候的img标签的src的属性就是一堆64位码，图片可以正常显示，然后通过HTML2canvas截屏：
<code>html2canvas(screen, { width:$(".capture_screen").width(), height:$(".capture_screen").height(), canvas:canvas, onrendered:function(canvas){ sendImg(canvas.toDataURL()); //发送64位码到服务器 } }) </code>
，然后后端php接收的代码是：
<code>define('UPLOAD_DIR', '../images/'); $img = $_POST['img']; $img = str_replace('data:image/png;base64,', '', $img); <div style="color:transparent">本文来源gaodai.ma#com搞##代!^码@网*</div><pre>搞gaodaima代码
$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’ => ‘存储失败’)); //存储失败 }
这样整个过程就结束了，然后在服务器上用户上传的图片，有的显示正常，有的是图片被压缩：
想请教一下:图片压缩是哪里的问题呢？
转载请注明原文链接：javascript – canvas对64位码图片合成截屏上传图片后压缩问题
