cropper动态裁剪图片（极简）

lfq761204

于 2021-06-02 10:14:20 发布

阅读量405

点赞数

分类专栏： JS 文章标签： js jquery javascript html

本文链接：https://blog.csdn.net/lfq761204/article/details/117461198

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

借助cropper插件可以很简单地实现客户端图片自定义裁剪，本文代码模拟的是最简单最基础的应用。

文件上传前的大小、类型限制可以参考：MVC中通过jquery实现图片预览、上传，并对文件类型、大小进行判断（极简）

裁剪后的内容如何上传至服务器，请参考：MVC中客户端向服务器端上传base64格式的图片

cropper插件下载链接（含v1.5.11版Cropper.js、Cropper.css，以及jquery.min.js）：cropper插件下载

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>cropper.js动态裁剪图片</title>
    <link href="Scripts/cropper.css" rel="stylesheet" />
    <script src="Scripts/cropper.js"></script>
    <script src="Scripts/jquery.min.js"></script>
    <script>
        $(function() {
            var CROPPER;
            //文件上传控件onchange事件，生成原图的预览以及Cropper对象
            $("#imgReader").change(function(e) {
                if(!this.files.length)return;   //如果未选择图片则退出函数
                //释放之前的Cropper资源——否则无法重新选择图片
                CropperDispose(); 
                //定义文件读取对象，并读取文件上传控件选择的文件。
                var reader=new FileReader();
                reader.readAsDataURL(this.files[0]);
                //文件对象的onload事件，上传文件载入后生成预览，并在预览图上生成Cropper对象
                reader.onload=function(e) {
                    $("#cropImg").attr("src",this.result);  //预览，this.result也可设置为e.target.result
                    //定义Cropper对象
                    //第一个参数一定不能写成$("#cropImg")，不要问怎么知道的，我满含泪水无语凝噎。
                    //第一个参数也可以写成document.getElementById("cropImg")
                    CROPPER=new Cropper($("#cropImg")[0],{//参数很多，可以百度
                        aspectRatio: 16/5,  //裁剪框宽高比例
                        autoCropArea: 1,    //初始裁剪框显示比例
                    }); 
                };
            });
            //裁剪图片按钮click事件，获得裁剪后图片的base64值，并通过img控件显示
            $("#btnCrop").click(function() {
                //获取裁剪框内内容的base64值
                //第一个参数设置生成文件的类型，可以查询http的content-type对照表
                //第二个参数为生成图片的压缩率
                let cropImg=CROPPER.getCroppedCanvas().toDataURL("image/jpeg",0.8);
                $("#cropResult").attr("src",cropImg);   //将base64通过img控件显示出来
            });
            //释放Cropper资源
            function CropperDispose() {
                if(CROPPER) {
                    CROPPER.destroy(); CROPPER=null;
                }
            }
        });
    </script>
    </head>
<body>
    <p><input type="file" id="imgReader" accept="image/*" /></p><!--文件上传控件-->
        <div style="width:300px;">
            <p><img src="" style="width:100%;" id="cropImg" /></p><!--图片预览容器-->
            <p><img src="" style="width:100%;" id="cropResult" /></p><!--裁剪后的图片容器-->
        </div>
        <p>
            <button id="btnCrop">裁剪图片</button><!--裁剪图片按钮-->
        </p>
</body>
</html>

lfq761204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cropper动态裁剪图片（极简）

借助cropper插件可以很简单地实现客户端的图片自定义裁剪。cropper插件下载链接（含v1.5.11版Cropper.js、Cropper.css，以及jquery.min.js）：
复制链接

扫一扫