使用环境我是在：ThinkPHP5.0.7，其他版本没在测试。
先上预览图：
这个插件用自 https://github.com/fengyuanchen/cropper
国内大牛 Chenfengyuan 写的 http://chenfengyuan.com，据说还蛮多国外人在用。
主要功能是：可预览裁剪图片和保存原图片，执行裁剪图片后会删除 裁剪的原图片目录，以便减少空间。
下面是开始代码：
一、附件下载
CropAvatar.php
//放在 extend\org
//这是自己稍微修改过。
//如果遇到 exif_imagetype 错误，需要打开 php.ini 中的 extension=php_exif.dll二、引入文件，//其他的 bootstrap.min.css，jquery.min.js，bootstrap.min.js
<link rel="stylesheet" href="cropavatar/css/cropper.min.css">
<link rel="stylesheet" href="cropavatar/css/main.css">
<script src="cropavatar/js/cropper.min.js" type="text/javascript"></script>
<script src="cropavatar/js/main.js" type="text/javascript"></script>三、common.php公共函数/**
* 转换字节
* @param $bytes 传入字节数值
* @param int $decimals
* @return string BKMGTP
*/
function human_filesize($bytes, $decimals = 2) {
$sz = 'BKMGTP';
$factor = floor((strlen($bytes) - 1) / 3);
return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
}
/**
* 删除该目录以及该目录下面的所有文件和文件夹
* @param $dir 目录
* @return bool
*/
function removeDir($dirName) {
//判断传入参数是否目录，如不是执行删除文件
if (!is_dir($dirName)) {
//删除文件
@unlink($dirName);
}
//如果传入是目录，使用@opendir将该目录打开，将返回的句柄赋值给$handle
$handle = @opendir($dirName);
//这里明确地测试返回值是否全等于（值和类型都相同）FALSE
//否则任何目录项的名称求值为 FALSE 的都会导致循环停止（例如一个目录名为“0”）
while (($file = @readdir($handle)) !== false) {
//在文件结构中，都会包含形如“.”和“..”的向上结构
//但是它们不是文件或者文件夹
if ($file != '.' && $file != '..') {
//当前文件$dir为文件目录+文件
$dir = $dirName . '/' .$file;
//判断$dir是否为目录，如果是目录则递归调用reMoveDir($dirName)函数
//将其中的文件和目录都删除；如果不是目录，则删除该文件
is_dir($dir) ? removeDir($dir) : @unlink($dir);
}
}
closedir($handle);
return rmdir($dirName);
}四、config.php配置文件//上传配置 根目录前需添加 一个 .
'syc_images' => [
//缩图保存位置
'thumb' => './uploads/thumbs',
//附件图片保存位置
'image' => './uploads/images',
//裁剪的原始图片保存位置
'original' => './uploads/original',
//上传限制 2*1024*1024
'size' => 2097152,
],五、Thumbs.php控制器<?php
// +----------------------------------------------------------------------
// | Copyright (c) 2017 http://www.sycit.cn
// +----------------------------------------------------------------------
// | Date: 2017/3/3
// +----------------------------------------------------------------------
// | Author: Peter.Zhang <hyzwd@outlook.com>
// +----------------------------------------------------------------------
// | Title: Thumbs.php
// +----------------------------------------------------------------------
namespace app\admin\controller;
use think\Request;
use Org\CropAvatar;
class Thumbs extends Common_base
{
public function index() {
//
$request = Request::instance();
if ($request->isPost()) {
//上传前先判断文件是否有错误
if ($_FILES['avatar_file']['error'] !== 0) {
$response = array('state' => 200,'message' => '文件过大或格式不对');
} else {
$options = $request->param('options');
if ($options == 'cope') {
//裁剪操作，传入参数顺序不能乱
$crop = new CropAvatar(
isset($_POST['avatar_src']) ? $_POST['avatar_src'] : null,
isset($_POST['avatar_data']) ? $_POST['avatar_data'] : null,
isset($_FILES['avatar_file']) ? $_FILES['avatar_file'] : null
);
//返回结果
$response = array(
'state' => 200,
'message' => $crop -> getMsg(),
'result' => $crop -> getResult()
);
//删除裁剪的原图目录文件
removeDir(Config('syc_images.original') . '/');
} elseif ($options == 'not_cut') {
//不裁剪操作
$file = $request->file('avatar_file');
$filename = Config('syc_images.thumbs');
//验证
$info = $file->validate(['size'=>Config('syc_images.size'),'ext'=>'jpg,png,gif'])->move($filename);
if ($info) {
$msg = '上传成功';
$result = ltrim($filename, ".") . '/' . date('Ymd') . '/' . $info->getFilename();
} else {
$msg = '原图片过大或格式不对';
$result = '';
}
$response = array(
'state' => 200,
'message' => $msg,
'result' => $result
);
}
}
//输出
echo json_encode($response);
} else {
return json('No data found!');
}
}
}六、view视图//id="art-thumb" 返回的图片地址
//id="preview" 返回的 img 小图
<body class="page-header-fixed">
<div class="form-group">
<label class="control-label col-md-2">浓缩图片</label>
<div class="col-md-3"><input type="text" name="art_thumb" id="art-thumb" class="form-control"></div>
<div class="col-md-2">
{// 调用 avatar-view}
<a class="btn red btn-outline sbold avatar-view"><i class="glyphicon glyphicon-folder-open"></i> 选择图片</a>
</div>
<div class="col-md-3"><div id="preview"></div></div>
</div>
{// file-thumd-modal.html 可以引用到其他页面要用到的地方}
{// 引入上传图片modal}
{include file="public/file-thumd-modal"}
<script language="javascript" type="text/javascript">
$(function () {
var $imgDiv = $('.avatar-wrapper');
$imgDiv.find('img').cropper({aspectRatio:NaN}); //设置自由裁剪， NaN 为自由裁剪，此为覆盖默认 1:1比例裁剪框
})
</script>
</body>
附件.zip
( 40.98 KB 下载：265 次 )
最佳答案
