当前位置:Gxlcms > PHP教程 > javascript-canvas对64位码图片合成截屏上传图片后压缩问题

javascript-canvas对64位码图片合成截屏上传图片后压缩问题

时间:2021-07-01 10:21:17 帮助过:28人阅读

我在做的一个手机端页面,需求是:在一张模板图片上,用户可以在输入框里输入信息,然后我通过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' => '存储失败')); //存储失败
    }

这样整个过程就结束了,然后在服务器上用户上传的图片,有的显示正常,有的是图片被压缩:

想请教一下:图片压缩是哪里的问题呢?

人气教程排行