thinkphp5.1.38+cropper.min.js图片压缩剪切代码

很多项目都需要对图片进行处理,比如图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求。

应用介绍

应用介绍

thinkphp5.1.38 LTS版本

const VERSION = '5.1.38 LTS';

thinkphp5.1.38 LTS版本

前端代码:html+js图片剪切库:cropper.min.js

<div class="container" id="crop-avatar">
    <div class="avatar-view" title="修改头像">
        <img src="/upload/attachment/2019.08.25/picture.png" alt="头像">
    </div>
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form class="avatar-form" action="{:url('index/index/img_upload', '', '')}" enctype="multipart/form-data" method="post">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">修改 头像</h4>
                    </div>
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div class="avatar-upload">
                                <input class="avatar-src" name="file_img" type="hidden">
                                <input class="avatar-data" name="avatar_data" type="hidden">
                                <label for="avatarInput">本地上传</label>
                                <input class="avatar-input" accept="image/*" id="avatarInput" name="avatar_file" type="file">
                            </div>
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="avatar-preview preview-lg"></div>
                                    <div class="avatar-preview preview-md"></div>
                                    <div class="avatar-preview preview-sm"></div>
                                </div>
                            </div>
                            <div class="row avatar-btns">
                                <div class="col-md-9">
                                    <div class="btn-group">
                                        <button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">左旋转</button>
                                        <button class="btn btn-primary" data-method="rotate" data-option="-15" type="button">-15度</button>
                                        <button class="btn btn-primary" data-method="rotate" data-option="-30" type="button">-30度</button>
                                        <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button">-45度</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">右旋转</button>
                                        <button class="btn btn-primary" data-method="rotate" data-option="15" type="button">15度</button>
                                        <button class="btn btn-primary" data-method="rotate" data-option="30" type="button">30度</button>
                                        <button class="btn btn-primary" data-method="rotate" data-option="45" type="button">45度</button>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <button class="btn btn-primary btn-block avatar-save" type="submit">剪切</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
</div>

thinkphp5.1.38版本

thinkphp5.1.38版本

thinkphp5.1.38图片压缩剪切代码,生成后返回一张缩略图,三张压缩图,一张原图。

<?php
namespace appindexcontroller;

use thinkController;
use thinkfacadeEnv;
use thinkfacadeValidate;
use thinkfacadeConfig;
class Index extends Controller
{
    //您可以进行图片压缩和剪切封装
    public function index()
    {
        // 不带任何参数 自动定位当前操作的模板文件
        return $this->fetch();
    }
    /**
     * 单文件上传
     * name:表单上传文件的名字
     * ext: 文件允许的后缀,字符串形式
     * path:文件保存目录
     */
    public function file_upload($name,$ext,$path){

        //根目录+配置的运行目录
        $root_path = Env::get('root_path') . Config::get("app.public_path");

        $dir_path = $root_path . DIRECTORY_SEPARATOR . 'upload' . DIRECTORY_SEPARATOR . $path;

        if (!is_dir($dir_path))mkdir($dir_path, 0777);// 使用最大权限0777创建文件

        $file = request()->file($name);

        $info = $file->validate(['size'=>1000000,'ext'=>$ext])->move($dir_path . DIRECTORY_SEPARATOR . date('Y') . DIRECTORY_SEPARATOR . date('md'), md5(microtime(true)));

        if($info){
            // 成功上传后 获取上传信息
            $save_name = $info->getSaveName();
            $data['file_path'] = DIRECTORY_SEPARATOR .'upload' . DIRECTORY_SEPARATOR . $path . DIRECTORY_SEPARATOR .date('Y') . DIRECTORY_SEPARATOR . date('md'). DIRECTORY_SEPARATOR .$save_name;
            $data['save_path'] = DIRECTORY_SEPARATOR . 'upload' . DIRECTORY_SEPARATOR . $path . DIRECTORY_SEPARATOR .date('Y') . DIRECTORY_SEPARATOR . date('md');
            $data['save_name'] =  $save_name;
        }else{
            // 上传失败获取错误信息
            $data['file_path'] =$info->getError();
        }
        return $data;
     }

    /*
     * 图片上传接口
    */

    public  function img_upload(){
        $avatar_data = $this->request->post('avatar_data');
        $avatar_data = json_decode($avatar_data, true);

        if(!empty($_FILES["avatar_file"]["name"]))
        {
            if($_FILES["avatar_file"]['size'] === 0){
                return json(['code' => '0', 'message' => '非法文件!']);
            }

            $file_mes = $this->file_upload('avatar_file','jpg,png,gif,jpeg','avatar');

            $file_path  = $file_mes['file_path'];

            $save_name  = $file_mes['save_name'];

            $save_path = $file_mes['save_path'];

            //图片压缩
            $data['prize_img'] = $file_path;

            $data['prize_img_view'] = Config::get("app.host_url").$file_path;

            $data['prize_img_400'] = $this->file_upload_thumb($file_path, 400, 400, $save_path, $save_name);

            $data['prize_img_200'] = $this->file_upload_thumb($file_path, 200, 200, $save_path, $save_name);

            $data['prize_img_150'] = $this->file_upload_thumb($file_path, 150, 150, $save_path, $save_name);

            //图片剪切
            if($avatar_data)
            {
                $data['prize_img_crop'] = $this->file_upload_crop($avatar_data['width'], $avatar_data['height'], $avatar_data['x'], $avatar_data['y'], $file_path, $save_path, $save_name);
            }

            //反斜杠替换
            $return_data = str_replace('','/',$data);

            return json(['code' => '1', 'message' => '上传成功','result'=>$return_data]);

        }
        else
        {
            return json(['code' => '2', 'message' => '图片不能为空!','result'=>null]);
        }

    }

public function file_upload_crop($width, $height, $x, $y, $file_path, $save_path, $save_name){

        //根目录+配置的运行目录
        $root_path = Env::get('root_path') . Config::get("app.public_path");

        $file_path = $root_path.$file_path;

        $image = thinkImage::open($file_path);//绝对路径

        $save_url = $save_path.DIRECTORY_SEPARATOR.'crop_'.$save_name;

        $save_name = $root_path.$save_url;

        $image->crop($width, $height, $x, $y)->save($save_name);

        return $save_url;

    }

    /**
     * 图片缩略图处理
     * file_path:文件路径
     * width :目标宽度
     * height:目标高
     * path:文件保存目录 : 需事先手动创建
    */

    public function file_upload_thumb($file_path, $width, $height, $save_path, $save_name){

        //根目录+配置的运行目录
        $root_path = Env::get('root_path') . Config::get("app.public_path");

        $file_path = $root_path.$file_path;

        $image = thinkImage::open($file_path);//绝对路径

        $save_url = $save_path.DIRECTORY_SEPARATOR.$width."_".$height.'_thumb_'.$save_name;

        $save_name = $root_path.$save_url;

        $image->thumb($width, $height)->save($save_name);

        return $save_url;
    }
}
点赞(12) 打赏

立即下载

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部