zoukankan      html  css  js  c++  java
  • cropper实现图片剪切上传

    一、引入文件

    <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

  • 相关阅读:
    Open source cryptocurrency exchange
    Salted Password Hashing
    95. Unique Binary Search Trees II
    714. Best Time to Buy and Sell Stock with Transaction Fee
    680. Valid Palindrome II
    Java compiler level does not match the version of the installed Java project facet.
    eclipse自动编译
    Exception in thread "main" java.lang.StackOverflowError(栈溢出)
    博客背景美化——动态雪花飘落
    java九九乘法表
  • 原文地址:https://www.cnblogs.com/Mrrabbit/p/9485488.html
Copyright © 2011-2022 走看看