前端cropper裁剪图像大小（原创）

最新推荐文章于 2024-02-18 10:26:14 发布

转载最新推荐文章于 2024-02-18 10:26:14 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/beimingbingpo/p/9522407.html

文章标签：

#前端 #javascript #ViewUI

本文介绍如何利用Cropper.js库实现图片上传及裁剪功能，具体包括设置裁剪比例、调整预览区域大小等操作。通过示例代码展示了如何将裁剪后的图片转换为Base64格式。

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

需求：上传头像，截取大小
cropper版本：4.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cropper.js</title>
</head>
<link rel="stylesheet" href="lib/cropper.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="lib/cropper.js"></script>
<style>
html,body{margin:0;padding:0;}
</style>
<body>
<input type="file" id="file" accept="image/*">
<div style="width:100%;max-height:300px;" id="image_div"> <!--这里注意，直接设置img的宽高是没有效果的，但是可以在父div设置；-->
    <img id="img" src="" >
</div>
<img id="img_base64" src="" style="width:200px;height:200px;display:none">
<button  id="ok_id">确定</button>
<script>
    var $image = $('#img_base64');
    $('#file').change(function(e){
        var file;
        var files = e.target.files;
        if (files && files.length > 0) {
            file = URL.createObjectURL(files[0]);
            $('#img').attr({'src': file})
        }
        $('#img').cropper("destroy");
        $('#img').cropper({
            aspectRatio: 1,
            viewMode: 1,
            guides: false,   //是否显示裁剪框虚线
            crop: function (e) { //剪裁框发生变化执行的函数。
            }
        });
    })
    $("#ok_id").on("click",function(){
           var dataURL = $('#img').cropper("getCroppedCanvas");  //cropper自带方法
           var imgurl = dataURL.toDataURL("image/*", 0.5);  //canvas转base64格式
           $image.attr('src', imgurl);
           $image.show();
    })
</script>
</body>
</html>

参考资料：
https://blog.youkuaiyun.com/weixin_38023551/article/details/78792400

转载于:https://www.cnblogs.com/beimingbingpo/p/9522407.html