码迷,mamicode.com
首页 > Web开发 > 详细

利用插件剪裁图片,并上传

时间:2017-04-05 10:50:56      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:上传图片   ima   效果   电脑   个人电脑   body   sid   sub   剪裁图片   

关于js处理图片的三大误区:        1.js操作文件,只能形成剪裁效果,不能生成图片文件;

                                            2.js选择文件时,无法获取文件在个人电脑中的路径;

                                            3.js不能为<input type=file>自动赋值,出于安全方面考虑,fileinput文件只能手动选择。

 

上传图片思路:                  1.使用jquery剪裁插件cropper直接上传,形成图片剪裁效果;

                                      2.使用html5的canvas根据原图,坐标和宽高进行剪裁,将生成的图片(data:image/jepg;base64 编码)直接post给后台服务器;

                                      3.php使用    

     $base64_url=$_REQUEST(‘pic‘); 
                           
     if (preg_match(‘/^(data:\s*image\/(\w+);base64,)/‘, $base64_url, $result)){
         $base64_body = substr(strstr($base64_url,‘,‘),1);
         $img=base64_decode($base64_body);
     }

     if (!$img){
         die("无图片");
     }
         
       //新建一个目录由$dirname指定的目录
     $dirname="file/".ugv::sid()."/".date("ym");
     ugv::mkdir($dirname);

           //文件名
     $r=ugv::randomid(10,3);
     $filename=ROOT_PATH.$dirname."/".$r.".jpg";
//插入数据库的文件名
$picname="/".$dirname."/".$r.".jpg"; //写入文件 file_put_contents( $filename,$img);

 

 

 

 

利用插件剪裁图片,并上传

标签:上传图片   ima   效果   电脑   个人电脑   body   sid   sub   剪裁图片   

原文地址:http://www.cnblogs.com/echoppy/p/6667714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!