cropper实现图片剪切上传

最新推荐文章于 2021-05-31 13:40:51 发布

weixin_30311605

最新推荐文章于 2021-05-31 13:40:51 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Mrrabbit/p/9485488.html

版权

一、引入文件

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="cropper.css">
<script src="cropper.js"></script>

二、html代码

<div class="box">
    <img id="image">
</div>

<div id="gg">
    <input type="file" id="selectImg"/>
    <button id="commit">确认</button>
    <button id="rotate">旋转</button>
</div>
<!--剪切后预览图片-->
<img id="yulan">

三、js代码

<script>
    //图片选择 触发的事件
    $("#selectImg").change(function(){
        if(!this.files || !this.files[0]){
            return
        }
        var reader = new FileReader();
        reader.onload = function(evt) {  
            var replaceSrc = evt.target.result;  
            // 更换cropper的图片  
            $('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真  
        }  
        reader.readAsDataURL(this.files[0]);
    })

    //旋转图片
    $("#rotate").click(function(){
        $("#image").cropper('rotate',30)
    })

    //确定裁剪
    $("#commit").on("click",function(){
        var cas = $('#image').cropper('getCroppedCanvas');// 获取被裁剪后的canvas  
        var base64 = cas.toDataURL('image/jpeg'); // 转换为base64  
        console.log(encodeURIComponent(base64))
        $("#yulan").prop('src',base64);//预览
        
    })

    //初始化  可以给#image元素一张默认图片 就可以直接看效果
    $('#image').cropper({//这里是给img 即被裁剪的图片进行参数配置
           aspectRatio: 100 / 100,//裁剪框的比例
           preview: $('.avatar-preview'),//预览的容器
           autoCropArea: 0.5,//初始化裁剪框大小（相对于图片大小做比例）
           movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）
           dragCrop:false,//不允许重新开裁剪框
           resizable:false,//不允许改变裁剪框大小
           background:false,
           crop: function(data) {
               //data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
               $('#x').val(data.x);
               $('#y').val(data.y);
               console.log(data)
               //console.log('w'+data.width+'   height'+data.height);
           },
           //这几个回调函数
           build: function (e) { //是图片绘制到cropper自动生成的canvas的开始   加载开始 
               //过渡效果 
           }, 
           built: function (e) { //加载完成  绘制完成 获取到相应的data
               
           }
    });

四、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传测试</title>
    <script src="jquery.min.js"></script>
    <link rel="stylesheet" href="cropper.css">
    <script src="cropper.js"></script>
    <style type="text/css">
        .box {
            width: 400px;
            height: 400px;
        }
        #gg{
            margin-top:50px;
        }
    </style>
</head>

<body>

<div class="box">
    <img id="image">
</div>

<div id="gg">
    <input type="file" id="selectImg"/>
    <button id="commit">确认</button>
    <button id="rotate">旋转</button>
</div>
<!--剪切后预览图片-->
<img id="yulan">
<script>
    //图片选择 触发的事件
    $("#selectImg").change(function(){
        if(!this.files || !this.files[0]){
            return
        }
        var reader = new FileReader();
        reader.onload = function(evt) {  
            var replaceSrc = evt.target.result;  
            // 更换cropper的图片  
            $('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真  
        }  
        reader.readAsDataURL(this.files[0]);
    })

    //旋转图片
    $("#rotate").click(function(){
        $("#image").cropper('rotate',30)
    })

    //确定裁剪
    $("#commit").on("click",function(){
        var cas = $('#image').cropper('getCroppedCanvas');// 获取被裁剪后的canvas  
        var base64 = cas.toDataURL('image/jpeg'); // 转换为base64  
        console.log(encodeURIComponent(base64))
        $("#yulan").prop('src',base64);//预览
        
    })

    //初始化  可以给#image元素一张默认图片 就可以直接看效果
    $('#image').cropper({//这里是给img 即被裁剪的图片进行参数配置
           aspectRatio: 100 / 100,//裁剪框的比例
           preview: $('.avatar-preview'),//预览的容器
           autoCropArea: 0.5,//初始化裁剪框大小（相对于图片大小做比例）
           movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）
           dragCrop:false,//不允许重新开裁剪框
           resizable:false,//不允许改变裁剪框大小
           background:false,
           crop: function(data) {
               //data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
               $('#x').val(data.x);
               $('#y').val(data.y);
               console.log(data)
               //console.log('w'+data.width+'   height'+data.height);
           },
           //这几个回调函数
           build: function (e) { //是图片绘制到cropper自动生成的canvas的开始   加载开始 
               //过渡效果 
           }, 
           built: function (e) { //加载完成  绘制完成 获取到相应的data
               
           }
    });           
</script>
</body>

</html>

cropper文档地址：http://www.jq22.com/jquery-info9322

转载于:https://www.cnblogs.com/Mrrabbit/p/9485488.html

weixin_30311605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cropper实现图片剪切上传

一、引入文件<script src="jquery.min.js"></script><link rel="stylesheet" href="cropper.css"><script src="cropper.js"></script>二、html代码<div class="box">...
复制链接

扫一扫