Cropper 图片裁剪并上传

最新推荐文章于 2019-09-15 19:52:14 发布
最新推荐文章于 2019-09-15 19:52:14 发布
阅读量253 收藏
点赞数
分类专栏： HTML canvas 上传图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boonyaxnn/article/details/94427060
版权
HTML 同时被 3 个专栏收录
26 篇文章 0 订阅
订阅专栏
canvas
7 篇文章 0 订阅
订阅专栏
上传图片
1 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <link rel="stylesheet" href="css/cropper.min.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src='js/cropper.min.js'></script>
        <style>
            .str {
                width: 150px;
                height: 200px;
                border: solid 1px #e3e3e3;
                padding: 5px;
                margin-top: 10px
            }
        </style>
        
    </head>
    <body>
        <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
         <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
         </label>
        <div class="str">
            <img id="finalImg" src="" width="100%">
        </div>

        <!--图片裁剪框 start-->
        <div style="display: none" class="tailoring-container">
            <div class="black-cloth" onclick="closeTailor(this)"></div>
            <div class="tailoring-content">
                <div class="tailoring-content-one">

                    <div class="close-tailoring" onclick="closeTailor(this)">×</div>
                </div>

                <div class="tailoring-content-two">
                    <div class="tailoring-box-parcel">
                        <img id="tailoringImg">
                    </div>
                    <div class="preview-box-parcel">
                        <p>图片预览：</p>
                        <div class="square previewImg"></div>
                        <!--  <div class="circular previewImg"></div>-->
                    </div>
                </div>

                <div class="tailoring-content-three">
                    <button class="l-btn cropper-reset-btn">复位</button>
                    <button class="l-btn cropper-rotate-btn">旋转</button>
                    <button class="l-btn cropper-scaleX-btn">换向</button>
                    <button class="l-btn sureCut" id="sureCut">确定</button>
                </div>
            </div>
        </div>
        <!--图片裁剪框 end-->
 <script type="text/javascript">  
    //弹出框水平垂直居中  
    (window.onresize = function() {  
        var win_height = $(window).height();  
        var win_width = $(window).width();  
        if (win_width <= 768) {  
            $(".tailoring-content").css(  
                    {  
                        "top" : (win_height - $(".tailoring-content")  
                                .outerHeight()) / 2,  
                        "left" : 0  
                    });  
        } else {  
            $(".tailoring-content").css(  
                    {  
                        "top" : (win_height - $(".tailoring-content")  
                                .outerHeight()) / 2,  
                        "left" : (win_width - $(".tailoring-content")  
                                .outerWidth()) / 2  
                    });  
        }  
    })();  
      
    // 选择文件触发事件  
    function selectImg(file) {  
        //文件为空，返回  
        if (!file.files || !file.files[0]) {  
            return;  
        }  
        $(".tailoring-container").toggle();  
        var reader = new FileReader();  
        reader.onload = function(evt) {  
            var replaceSrc = evt.target.result;  
            // 更换cropper的图片  
            $('#tailoringImg').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真  
        }  
        reader.readAsDataURL(file.files[0]);  
    }  
    // cropper图片裁剪  
    $('#tailoringImg').cropper({  
        aspectRatio : 1 / 1,// 默认比例  
        preview : '.previewImg',// 预览视图  
        guides : false, // 裁剪框的虚线(九宫格)  
        autoCropArea : 0.5, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8  
        movable : false, // 是否允许移动图片  
        dragCrop : true, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域  
        movable : true, // 是否允许移动剪裁框  
        resizable : true, // 是否允许改变裁剪框的大小  
        zoomable : false, // 是否允许缩放图片大小  
        mouseWheelZoom : false, // 是否允许通过鼠标滚轮来缩放图片  
        touchDragZoom : true, // 是否允许通过触摸移动来缩放图片  
        rotatable : true, // 是否允许旋转图片  
        crop : function(e) {  
            // 输出结果数据裁剪图像。  
        }  
    });  
    // 旋转  
    $(".cropper-rotate-btn").on("click", function() {  
        $('#tailoringImg').cropper("rotate", 45);  
    });  
    // 复位  
    $(".cropper-reset-btn").on("click", function() {  
        $('#tailoringImg').cropper("reset");  
    });  
    // 换向  
    var flagX = true;  
    $(".cropper-scaleX-btn").on("click", function() {  
        if (flagX) {  
            $('#tailoringImg').cropper("scaleX", -1);  
            flagX = false;  
        } else {  
            $('#tailoringImg').cropper("scaleX", 1);  
            flagX = true;  
        }  
        flagX != flagX;  
    });  
      
    // 确定按钮点击事件  
    $("#sureCut").on("click", function() {  
        if ($("#tailoringImg").attr("src") == null) {  
            return false;  
        } else {  
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');// 获取被裁剪后的canvas  
            var base64 = cas.toDataURL('image/jpeg'); // 转换为base64  
      
                $("#finalImg").prop("src", base64);// 显示图片  
            uploadFile(encodeURIComponent(base64))//编码后上传服务器  
            closeTailor();// 关闭裁剪框  
            }  
        });  
      
        // 关闭裁剪框  
        function closeTailor() {  
            $(".tailoring-container").toggle();  
        }  
      
        //ajax请求上传  
        function uploadFile(file) {  
            $.ajax({  
                url : '/demo/upload.do',  
                type : 'POST',  
                data : "file=" + file,  
                async : true,  
                success : function(data) {  
                    console.log(data)  
                }  
            });  
        }  
    </script>  

    </body>

</html>

效果图：

 

 

boonyaxnn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-cropper图片裁剪并上传
Z_0926的博客
03-19 707
react-cropper图片裁剪并上传 官方Demo github 1、安装 npm install --save react-cropper 2、效果图 3、大致代码 import Cropper from 'react-cropper'; import 'cropperjs/dist/cropper.css'; const ScreenCropper = (props) => { const [image, setImage] = useState(defaultImg); const
cropper 裁剪上传java_图片裁剪(cropper)后上传问题
weixin_31129503的博客
02-28 268
最近工作需要处理头像裁剪以及上传，研究了几天，写点心得，提醒自己记住踩过的坑，能帮助别人当然更好。功能基本就是这样：这里需要注意的是：拿到需求后，不要急于直接上手，花费半个小时，甚至更长时间缕清整个脉络是很有必要的，本人就因为后台接口的问题，返工了...这里只是对完成方法的概述，具体实现功能请自行解决(真的一搜就有)！！！起先，对这种功能以前并没有接触过，但是鉴于能力问题，采取插件可能是最好的方法...
Cropper 图片裁剪工具 --java
08-23
JS嵌入Cropper，在上传照片后，预览照片，并对照片经行裁剪保存
图片上传 Base64 编码解码转换
qq_35425070的博客
09-15 473
/** * @Description: 将base64编码字符串转换为图片，BASE64Decoder是线程不安全类 * @param imgStr base64编码字符串 * @param path 图片路径-具体到文件 * @return */ public static boolean generateImage(String imgStr, String path) { 　　if ...
cropper裁剪图片（一）
static_coder的博客
11-30 1822
1、前言 在上传图片的过程中，我们经常会限制上传图片的尺寸，但是我们的图片来源尺寸各异。所以在上传之前需要先裁剪图片然后再上传。今天使用一种插件cropper.js这个插件完成几个小demo，记录一下，以备后续使用。 2、使用前准备 cropper该插件有两种版本，一种是依赖于jquery，另一种则不依赖，使用原生的JS。本例使用依赖jquery的版本。 使用的时候需要引入依赖的js和css：（
基于cropper图片裁剪,兼容PC端与移动端
weixin_30505751的博客
02-11 195
所需的资源文件 <link rel="stylesheet" href="https://cdn.bootcss.com/cropper/4.0.0-beta/cropper.css"> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src=...
js 裁剪图片压缩并且上传 图片
Huang_wf
06-26 4183
今天接到一个比较懒的后台的要求：后台要求在裁剪图片的同时，根据文件大小来按不同比例压缩图片。页面代码&lt;!--** * *----------Created by 黄伟峰 on 2018/6/26.---------- * 　　　┏┓　　　┏┓ * 　　┏┛┻━━━┛┻┓ * 　　┃　　　　　　　┃ * 　　┃　　　━　　　┃ * 　　┃　┳┛　┗┳　┃ * 　　┃　　　　　　...
cropper裁剪图片并上传
王绍桦
08-09 4473
引入cropper所依赖的js和css，可在官网下载。    我的资源地址：https://download.csdn.net/download/rexueqingchun/10593965 把裁剪的图片转化为base64上传    前台程序 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEn...
bootstrap+cropper图片裁剪代码
03-16
Bootstrap 和 Cropper.js 是两个在前端开发中广泛使用的工具，它们结合使用可以实现高效、美观的图片裁剪功能。在H5（HTML5）应用中，这种功能常常用于头像上传、图片预览和编辑等场景。下面我们将深入探讨这两个库...
webuploader+cropper图片裁剪，旋转，上传，PC和H5通用
12-04
在现代Web应用中，图片处理是一项常见的需求，无论是社交媒体、电商平台还是个人博客，都需要用户能够上传并编辑图片。"webuploader+cropper"是解决这一问题的一个高效方案，它提供了图片裁剪、旋转以及上传的功能，...
cropper+layui实现图片裁剪、旋转、放大缩小后上传
12-12
`Cropper`是一款强大的JavaScript图片裁剪库，它提供了丰富的API和事件，支持图片的裁剪、旋转、放大、缩小等功能。`Cropper`库基于HTML5的`Canvas`元素，可以精确地处理像素级别的图像操作。它具有以下关键特性： ...
cropper制作图片裁剪不失真
08-23
`Cropper.js` 是一个优秀的JavaScript库，专门用于实现高精度和灵活性的图片裁剪功能，它确保了裁剪后的图片不失真，因此非常适合用于制作 Banner、头像等应用场景。在本文中，我们将深入探讨`Cropper.js`的相关知识...
HTML iframe 实现功能页面动态切换
热门推荐
boonyaxnn的博客
09-08 1万+
Iframe .left{ color:#0F0; border: #0F6 1px solid; width:20%; height:300px; float:left; text-align:center; } .right{ color
css实现圆形头像
boonyaxnn的博客
03-02 1万+
效果图如下：
HTML <img>使用说明-相对路径与绝对路径
boonyaxnn的博客
08-10 6062
1.相对路径 外网相对路径： src="/i/eg_tulip.jpg" alt="小妞妞" /> 本地相对路径（两个同级的文件）可以直接访问如： 2.绝对路径 外网绝对路径： 本地磁盘绝对路径需要加“file:///"前缀，如：  点击页面右键，查看源代码：
HTML <br>换行标签
boonyaxnn的博客
08-15 4347
我的主页 静夜思 唐 李白 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 效果图：
HTML 表单制作
boonyaxnn的博客
08-24 3673
我的主页 教学意见调查表 个人及课程资料 科目名称 请选择系所: 音乐系 法律系 英语系 土木系 电子工程系 商务管理系 讲师： 性别： 女生 男生 开课日期： 意见调查 这门课的出勤状况是 没有缺课  缺课1-3次  缺课3-5次  选这门课的原因（可所选）： 必
vue-cropper图片裁剪上传
最新发布
09-15
要实现Vue图片裁剪上传，可以使用vue-cropper组件。以下是一个简单的实现过程： 1. 首先，在Vue项目中安装vue-cropper组件。可以使用npm或yarn来安装，命令如下： ``` npm install vue-cropper ``` 2. 在需要使用图片裁剪上传的组件中，引入vue-cropper组件。可以在组件的template中添加以下代码： ```html <template> <div> <vue-cropper ref="cropper" :src="imageSrc" :guides="true" :view-mode="1" :auto-crop-area="0.8" ></vue-cropper> <button @click="cropImage">裁剪并上传</button> </div> </template> ``` 3. 在组件的script部分，添加必要的代码。首先，引入vue-cropper组件： ```javascript import VueCropper from 'vue-cropper' ``` 然后，在components中注册vue-cropper组件： ```javascript components: { VueCropper }, ``` 接下来，定义data中的imageSrc属性，用于展示需要裁剪的图片： ```javascript data() { return { imageSrc: '图片路径' } }, ``` 4. 实现裁剪并上传功能。在methods中，定义cropImage方法： ```javascript methods: { cropImage() { const cropper = this.$refs.cropper const imageData = cropper.getCroppedCanvas().toDataURL('image/jpeg') // 将imageData发送到后端进行上传处理 // ... } }, ``` 在cropImage方法中，通过this.$refs.cropper获取vue-cropper组件实例，并使用getCroppedCanvas方法获取裁剪后的图片数据。最后，将图片数据发送到后端进行上传处理。 这样，就实现了Vue图片裁剪上传的功能。你可以根据具体的需求，自定义vue-cropper组件的属性和方法，来实现更多的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值