layer 弹框 cropper 裁剪上传图片，thinkphp 3 使用 CropAvatar.class.php

最新推荐文章于 2024-09-13 22:21:57 发布

南郭未末

最新推荐文章于 2024-09-13 22:21:57 发布

阅读量2.6k

点赞数

分类专栏： PHP 文章标签： layer 回写父页面 cropper裁剪并上传 CropAvatar.class.php

本文链接：https://blog.csdn.net/ybb350680013/article/details/80930759

版权

本文介绍了如何结合layer弹框和cropper组件，在ThinkPHP 3框架下实现图片裁剪并上传的功能。通过提供详细的调用页面代码和action处理，帮助开发者解决实际操作中可能出现的问题，特别是针对CropAvatar.class.php类文件的使用和调试。如果遇到图片未保存到指定目录的情况，可能是因为类文件中保存图片时未使用完整磁盘路径。

摘要由CSDN通过智能技术生成

最近要做一个上传裁剪图片功能，但是网上收出来的东西，知识点都是对的。但是就是没说清楚，也无法连续起来用。

经过自己整理出来的一套代码，亲测可用！

不用多说，直接上菜。

PS：搜索引擎收录的还是很垃圾......

调用页面，简单代码（可复用）

<img src="{$info.cover}" id="crop_img" width="150">
<input id="crop_img_value" type="hidden" name="cover" value="{$info.cover}" />
<a href="javascript:void();" class="btn btn-default" id="layer_upload">上传封面</a>

$("#layer_upload").on("click",function(){
    layer.open({
	type: 2,
	title: '上传图片',
	shadeClose: true,
	shade: 0.8,
	area: ['95%', '95%'],
	content: '/common/uploadimg'
    }); 
});

layer 弹框页面 uploadimg.tpl

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
    <link href="__STATIC__/cropavatar/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="__STATIC__/cropavatar/css/cropper.min.css" rel="stylesheet"/>
    <link href="__STATIC__/cropavatar/css/main.css" rel="stylesheet"/>
</head>
<body>
<div class="" id="crop-avatar">
 <div id="avatar-modal" >
<form class="avatar-form" id="avatar-form" enctype="multipart/form-data" method="post">
    <div class="modal-header">
        <h4 style="text-align: center;" class="modal-title" id="avatar-modal-label">上传图片</h4>
    </div>
    <div class="modal-body">
        <div class="avatar-body">

            <!-- Upload image and data -->
            <div class="avatar-upload">
                <input class="options" id="options" name="options" type="hidden" value="cope"/>
                <input class="avatar-src" id="avatar_src" name="avatar_src" type="hidden" value=""/>
                <input class="avatar-data" id="avatar_data" name="avatar_data" type="hidden" value=""/>
                <label for="avatarInput" style="display:none;">图片上传</label>
                <input class="avatar-input" id="avatarInput" name="tmp_name" type="file"/>
            </div>

            <!-- Crop and preview -->
            <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="旋转-90°">向左旋转</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°</