使用cropbox实现图片剪切上传

最新推荐文章于 2024-05-09 09:33:27 发布

baidu_32740655

最新推荐文章于 2024-05-09 09:33:27 发布

阅读量4.1k

点赞数

本文链接：https://blog.csdn.net/baidu_32740655/article/details/50973888

版权

之前也在网上看了很多只有这个图片剪切框架是不通过服务器裁剪图片存储到服务器，通过base64存储到服务器直接发送到imgsrc里直接解析显示

需要用到的js.jar包有cropbox.js，cropbox附带的css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片裁剪</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/cropbox.js"></script>

<div class="container">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none;">Loading...</div>
    </div>
    <div class="action">
        <input type="file" id="file" style="float:left; width: 250px" >
        <input type="button" id="btnCrop" value="Crop" style="float: right">
        <input type="button" id="btnZoomIn" value="+" style="float: right">
        <input type="button" id="btnZoomOut" value="-" style="float: right">
    </div>
    <div class="cropped"></div>
</div>

<script type="text/javascript">
$(window).load(function() {
   var options =
   {
       thumbBox: '.thumbBox',
       spinner: '.spinner',
       imgSrc: ''
   }
//   var cropper = $('.imageBox').cropbox(options);
   $('#file').on('change', function(){
       var reader = new FileReader();
       reader.onload = function(e) {
           options.imgSrc = e.target.result;
           cropper = $('.imageBox').cropbox(options);
       }
       reader.readAsDataURL(this.files[0]);
       this.files = [];
   })
   $('#btnCrop').on('click', function(){
       $(".cropped").empty();
       var img = cropper.getDataURL();

$('.cropped').append('<img src="'+img+'">');

//点击请求发送ajax请求

       $.ajax({
           url:"http://localhost:8080/cut/list.do",
           data:{"data":img},
           type:"post",
           dataType:"json",


       })

   })
   $('#btnZoomIn').on('click', function(){
       cropper.zoomIn();
   })
   $('#btnZoomOut').on('click', function(){
       cropper.zoomOut();
   })
});
</script>
<div style="text-align:center;">

</div>
</body>
</html>

baidu_32740655

关注

0
点赞
踩
0

收藏

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

之前也在网上看了很多只有这个图片剪切框架是不通过服务器裁剪图片存储到服务器，通过base64存储到服务器直接发送到imgsrc里直接解析显示需要用到的js.jar包有cropbox.js，cropbox附带的css图片裁剪 Loading...
复制链接

扫一扫