zoukankan      html  css  js  c++  java
  • 利用插件剪裁图片,并上传

    ---关于js处理图片的三大误区:      

                                                1.js操作文件,只能形成剪裁效果,不能生成图片文件;

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

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

    ---上传图片思路:                

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

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

                                          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);

     

  • 相关阅读:
    S32K142学习记录_day1
    dsPIC33EP单片机的PPS(外设引脚选择)
    零欧电阻
    MOS管的栅极和源极之间的电阻
    RDLC表格排序设置
    SQL相关
    使用sql的xmlpath可以把xml文件转化为表格
    Visual Studio2017 无法折叠
    使用图形化界面打包自己的类库
    初识NuGet及快速安装使用
  • 原文地址:https://www.cnblogs.com/echoppy/p/6667714.html
Copyright © 2011-2022 走看看