TP5+cropper-master上传图片裁剪插件

一、附件下载

1. CropAvatar.php

2. //放在 extend\org 

3. //这是自己稍微修改过。

4. //如果遇到 exif_imagetype 错误，需要打开 php.ini 中的 extension=php_exif.dll

二、引入文件，

1. //其他的 bootstrap.min.css，jquery.min.js，bootstrap.min.js

2. <link rel="stylesheet" href="cropavatar/css/cropper.min.css">

3. <link rel="stylesheet" href="cropavatar/css/main.css">

4. <script src="cropavatar/js/cropper.min.js" type="text/javascript"></script>

5. <script src="cropavatar/js/main.js" type="text/javascript"></script>

三、common.php公共函数

1. /**

2.  * 转换字节

3.  * @param $bytes 传入字节数值

4.  * @param int $decimals

5.  * @return string BKMGTP

6.  */

7. function human_filesize($bytes, $decimals = 2) {

8.     $sz = 'BKMGTP';

9.     $factor = floor((strlen($bytes) - 1) / 3);

10.     return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];

11. }

13. /**

14.  * 删除该目录以及该目录下面的所有文件和文件夹

15.  * @param $dir 目录

16.  * @return bool

17.  */

18. function removeDir($dirName) {

19.     //判断传入参数是否目录，如不是执行删除文件

20.     if (!is_dir($dirName)) {

21.         //删除文件

22.         @unlink($dirName);

23.     }

24.     //如果传入是目录，使用@opendir将该目录打开，将返回的句柄赋值给$handle

25.     $handle = @opendir($dirName);

26.     //这里明确地测试返回值是否全等于（值和类型都相同）FALSE

27.     //否则任何目录项的名称求值为 FALSE 的都会导致循环停止（例如一个目录名为“0”）

28.     while (($file = @readdir($handle)) !== false) {

29.         //在文件结构中，都会包含形如“.”和“..”的向上结构

30.         //但是它们不是文件或者文件夹

31.         if ($file != '.' && $file != '..') {

32.             //当前文件$dir为文件目录+文件

33.             $dir = $dirName . '/' .$file;

34.             //判断$dir是否为目录，如果是目录则递归调用reMoveDir($dirName)函数

35.             //将其中的文件和目录都删除；如果不是目录，则删除该文件

36.             is_dir($dir) ? removeDir($dir) : @unlink($dir);

37.         }

38.     }

39.     closedir($handle);

40.     return rmdir($dirName);

41. }

42. 四、config.php配置文件

    1. //上传配置 根目录前需添加 一个 .

    2.     'syc_images'   => [

    3.         //缩图保存位置

    4.         'thumb' => './uploads/thumbs',

    5.         //附件图片保存位置

    6.         'image' => './uploads/images',

    7.         //裁剪的原始图片保存位置

    8.         'original' => './uploads/original',

    9.         //上传限制 2*1024*1024

    10.         'size'  => 2097152,

    11.     ],

    五、Thumbs.php控制器

    1. <?php

    2. // +----------------------------------------------------------------------

    3. // | Copyright (c) 2017 http://www.sycit.cn

    4. // +----------------------------------------------------------------------

    5. // | Date:   2017/3/3

    6. // +----------------------------------------------------------------------

    7. // | Author: Peter.Zhang  <hyzwd@outlook.com>

    8. // +----------------------------------------------------------------------

    9. // | Title:  Thumbs.php

    10. // +----------------------------------------------------------------------

    11. namespace app\admin\controller;

    13. use think\Request;

    14. use Org\CropAvatar;

    16. class Thumbs extends Common_base

    17. {

    18.     public function index() {

    19.         //

    20.         $request = Request::instance();

    21.         if ($request->isPost()) {

    22.             //上传前先判断文件是否有错误

    23.             if ($_FILES['avatar_file']['error'] !== 0) {

    24.                 $response = array('state' => 200,'message' => '文件过大或格式不对');

    25.             } else {

    26.                 $options = $request->param('options');

    27.                 if ($options == 'cope') {

    28.                     //裁剪操作，传入参数顺序不能乱

    29.                     $crop = new CropAvatar(

    30.                         isset($_POST['avatar_src']) ? $_POST['avatar_src'] : null,

    31.                         isset($_POST['avatar_data']) ? $_POST['avatar_data'] : null,

    32.                         isset($_FILES['avatar_file']) ? $_FILES['avatar_file'] : null

    33.                     );

    34.                     //返回结果

    35.                     $response = array(

    36.                         'state'  => 200,

    37.                         'message' => $crop -> getMsg(),

    38.                         'result' => $crop -> getResult()

    39.                     );

    40.                     //删除裁剪的原图目录文件

    41.                     removeDir(Config('syc_images.original') . '/');

    42.                 } elseif ($options == 'not_cut') {

    43.                     //不裁剪操作

    44.                     $file = $request->file('avatar_file');

    45.                     $filename = Config('syc_images.thumbs');

    46.                     //验证

    47.                     $info = $file->validate(['size'=>Config('syc_images.size'),'ext'=>'jpg,png,gif'])->move($filename);

    48.                     if ($info) {

    49.                         $msg = '上传成功';

    50.                         $result = ltrim($filename, ".") . '/' . date('Ymd') . '/' . $info->getFilename();

    51.                     } else {

    52.                         $msg = '原图片过大或格式不对';

    53.                         $result = '';

    54.                     }

    55.                     $response = array(

    56.                         'state'  => 200,

    57.                         'message' => $msg,

    58.                         'result' => $result

    59.                     );

    60.                 }

    61.             }

    62.             //输出

    63.             echo json_encode($response);

    64.         } else {

    65.             return json('No data found!');

    66.         }

    67.     }

    68. }

    


    六、view视图

    1. //id="art-thumb" 返回的图片地址

    2. //id="preview" 返回的 img 小图

    3. <body class="page-header-fixed">

    4.      <div class="form-group">

    5.      <label class="control-label col-md-2">浓缩图片</label>

    6.             <div class="col-md-3"><input type="text" name="art_thumb" id="art-thumb" class="form-control"></div>

    7.             <div class="col-md-2">

    8.                      {// 调用 avatar-view}

    9.                     <a class="btn red btn-outline sbold avatar-view"><i class="glyphicon glyphicon-folder-open"></i> 选择图片</a>

    10.             </div>

    11.             <div class="col-md-3"><div id="preview"></div></div>

    12.      </div>

    13. {// file-thumd-modal.html 可以引用到其他页面要用到的地方}

    14. {// 引入上传图片modal}

    15. {include file="public/file-thumd-modal"}

    16. <script  language="javascript" type="text/javascript">

    17.     $(function () {

    18.         var $imgDiv = $('.avatar-wrapper');

    19.         $imgDiv.find('img').cropper({aspectRatio:NaN}); //设置自由裁剪， NaN 为自由裁剪，此为覆盖默认 1:1比例裁剪框

    20.     })

    21. </script>

    22. </body>

1. 附件下载