图片裁剪工具之cropper.js

最新推荐文章于 2025-03-14 18:20:33 发布

CodeDevMaster

最新推荐文章于 2025-03-14 18:20:33 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/qq_38628046/article/details/119955457

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了cropper.js和jquery-cropper两个强大的图片裁剪工具，它们支持手机端并兼容IE9以上浏览器。通过示例代码展示了如何选择图片、初始化裁剪区域以及获取裁剪后的图片数据。示例中包含图片裁剪区域、预览区域的设置，并提供了文件选择、上传和裁剪结果获取的完整流程。

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

cropper.js

Cropper.js 是一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括 IE9 以上的现代浏览器。

cropperjs项目地址: https://github.com/fengyuanchen/cropperjs

jquery-cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

jquery-cropper项目地址:https://github.com/fengyuanchen/jquery-cropper

示例Demo

下载cropperjs项目,进入docs目录,访问index.html即可访问示例Demo
在这里插入图片描述

具体使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/cropper.css"/>
    <script src="/js/jquery.js"></script>
    <script src="/js/cropper.js"></script>
    <script src="/js/jquery-cropper.js"></script>
    <script>
        $(function () {

            // 获取裁剪区域DOM元素
            var $image = $('#image')
            // 配置选项
            const options = {
                // 纵横比
                aspectRatio: 1,
                // 指定预览区域
                preview: '.img-preview'
            }

            // 创建裁剪区域
            $image.cropper(options)

            // 上传按钮绑定点击事件
            $('#selectFile').on('click', function () {
                $('#file').click()
            })

            // 文件选择框绑定change事件
            $('#file').on('change', function (e) {
                // 获取选择的文件
                var filelist = e.target.files
                if (filelist.length === 0) {
                    alert("请选择照片")
                }

                // 拿到选择文件
                var file = e.target.files[0]
                // 将文件，转化为路径
                var imgURL = URL.createObjectURL(file)
                // 重新初始化裁剪区域
                $image
                    .cropper('destroy') // 销毁旧的裁剪区域
                    .attr('src', imgURL) // 重新设置图片路径
                    .cropper(options) // 重新初始化裁剪区域
            })

            // 确定按钮，绑定点击事件
            $('#ok').on('click', function () {
                // 拿到裁剪之后的图片
                var dataURL = $image
                    .cropper('getCroppedCanvas', {
                        // 创建一个Canvas画布
                        width: 100,
                        height: 100
                    })
                    .toDataURL('image/png') // 将Canvas画布上的内容，转化为base64格式的字符串
                   
                   // 转为文件对象
                   //  .toBlob(function(blob) {
                   //        console.log(blob);
                   //      })

                // 控制台打印,上传服务器
                console.log(dataURL);

            })
        })

    </script>
</head>
<body>
<div >
    <!-- 图片裁剪区域 -->
    <div style="width: 300px; height: 300px;float: left">
        <img id="image" src="/images/sample.jpg"/>
    </div>

    <!-- 图片预览区域 -->
    <div style="float: left;margin-left: 33%;">
        <div>
            <!-- 宽高为 100px 的预览区域 -->
            <div class="img-preview" style="width: 100px;height: 100px;overflow: hidden; border-radius: 50%;"></div>
        </div>

        <div style="margin-top: 60px;">
            <!-- 宽高为 50px 的预览区域 -->
            <div class="img-preview" style="width: 50px;height: 50px;overflow: hidden; border-radius: 50%;"></div>
        </div>
    </div>
</div>

<div style="float: right;width: 33%;line-height: 300px;">
    <input type="file" id="file" accept="image/png,image/jpeg" hidden/>
    <button type="button" id="selectFile">选择文件</button>
    <button type="button" id="ok">获取生成文件</button>
</div>
</body>
</html>