javascript-canvas对64位码图片合成截屏上传图片后压缩问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-canvas对64位码图片合成截屏上传图片后压缩问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4012字，纯文字阅读大概需要6分钟。
内容图文
我在做的一个手机端页面，需求是：在一张模板图片上，用户可以在输入框里输入信息，然后我通过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' => '存储失败')); //存储失败
}这样整个过程就结束了，然后在服务器上用户上传的图片，有的显示正常，有的是图片被压缩：
想请教一下:图片压缩是哪里的问题呢？
内容总结
以上是互联网集市为您收集整理的javascript-canvas对64位码图片合成截屏上传图片后压缩问题全部内容，希望文章能够帮你解决javascript-canvas对64位码图片合成截屏上传图片后压缩问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。