layui框架实战案例(8)：web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)

最新推荐文章于 2023-06-08 09:09:46 发布

漏刻有时

最新推荐文章于 2023-06-08 09:09:46 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui 漏刻有时文章标签：前端 javascript php

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/125522580

漏刻有时同时被 2 个专栏收录

291 篇文章

订阅专栏

layui

60 篇文章

订阅专栏

本文详细介绍了cropper.js组件的使用，包括如何实现图片裁剪、缩放、移动和旋转，以及如何将裁剪后的图片以Base64格式发送到后端。通过实例演示了HTML容器配置、layui插件调用和PHP后端接收处理的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cropper.js组件，弹出图片裁剪窗口，支持图片缩放、移动、旋转，将裁剪后的图片以base64的格式传给后端。

支持Promise API
支持移动触摸事件
基于canvas技术，支持canvas的浏览器都可以使用该插件
通过Base64编码导出剪裁后的图片。可以通过json数据来获取图片的位置和大小
可以通过json数据来设置图片的位置和大小
可以通过URL来获取图片。

外部引入

    <script src="layui/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="cropper.css">
    <script src="cropper.js"></script>
    <script src="croppers.js"></script>

HTML容器

<div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline">
        <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <div class="layui-upload-list" style="margin:0" id="srcimgurl"></div>
    </div>
    <div class="layui-input-inline layui-btn-container">
        <button class="layui-btn layui-btn-primary" id="editimg">选择图片</button>
    </div>
    <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
</div>

layui组件调用

    layui.use(['form', 'croppers'], function () {
        var $ = layui.jquery
            , form = layui.form
            , croppers = layui.croppers
            , layer = layui.layer;

        //创建上传组件
        croppers.render({
            elem: '#editimg'
            , saveW: 150//保存宽度
            , saveH: 150
            , mark: 1 / 1 //选取比例
            , area: ['90%', '80%']//弹窗宽度
            , url: 'upload.php'
            , done: function (res) {
                console.log(res.imgUrl)
                $("#inputimgurl").val(res.imgUrl);
                $("#srcimgurl").html('<img src="' + res.imgUrl + '" width="30" class="layui-upload-img">');
            }
        });
    });

PHP后端上传

<?php
$upload_dir = 'upload';
$newDate = date("Y-m");
$imgUrl = $upload_dir . '/' . $newDate;

if (!is_dir($upload_dir)) {
    mkdir($upload_dir);
}
if (!is_dir($imgUrl)) {
    mkdir($imgUrl);
}

//获取传递参数;
$file = $_FILES['file'];
$ext = explode('.', $_FILES['file']['name']);
$ext = end($ext);
$fileName = md5(time()) . "." . $ext;

//执行上传;
if (isset($_FILES['file']) && $_FILES['file']['error'] == "0") {
    //上传图片；
    move_uploaded_file($file['tmp_name'], $imgUrl . "/" . $fileName);
    $safe_img = $imgUrl . "/" . $fileName;

    //返回JSON；
    $res['code'] = "0";
    $res['imgUrl'] = $safe_img;
    $res['err'] = '上传成功!';
    die(json_encode($res));
}