示例Demo

下载cropperjs项目,进入docs目录,访问index.html即可访问示例Demo
具体使用示例

<!DOCTYPE html>
<html lang="en">
    <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>
    <!-- 图片裁剪区域 -->
    <div style="width: 300px; height: 300px;float: left">
        <img id="image" src="/images/sample.jpg"/>
    <!-- 图片预览区域 -->
    <div style="float: left;margin-left: 33%;">
            <!-- 宽高为 100px 的预览区域 -->
            <div class="img-preview" style="width: 100px;height: 100px;overflow: hidden; border-radius: 50%;"></div>
        <div style="margin-top: 60px;">
            <!-- 宽高为 50px 的预览区域 -->
            <div class="img-preview" style="width: 50px;height: 50px;overflow: hidden; border-radius: 50%;"></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>
</body>
</html>
  
分类：
 后端
 标签：
 后端
 
   
      安装掘金浏览器插件
     多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
      
    CodeDevMaster
        全栈工程师
         1,628