Django使用cropbox包来上传裁剪图片

1、使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I

  ImgCrop包包括:css--style.css,js--cropbox.js、cropbox-min.js,jquery-1.11.1.min.js,index.html

  把css和js文件分门别类的放置到django项目中的static目录下,为了区分把style.css更名为imagecrop.css。

2、在views.py中增加视图函数:  

def my_image(request):
    if request.method=='POST':
        img=request.POST['img'] #从前端imagecrop.html通过ajax提交的img数据
        #保存到数据表中,代码略
        #dbinfo.save()
        return  HttpResponse("1")
    else:
        return render(request,'imagecrop.html')

3、前台页面imagecrop.html,从index.html修改而来。

复制代码
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/imagecop.css' %}">

<div class="container">
  <div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none"></div>
  </div>
  <div class="action">
    <!-- <input type="file" id="file" style=" width: 200px">-->
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
      <label for="upload-file">请先选择图片...</label>
      </a>
      <input type="file" class="" name="upload-file" id="upload-file" />
    </div>
    <input type="button" id="btnCrop" class="Btnsty_peyton" value="OK">
    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
  </div>
  <div class="cropped"></div>
</div>

<script src="{% static 'js/jquery-1.11.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/cropbox-min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/csrf.js' %}"></script>

<script type="text/javascript">
$(window).load(function() {
    var options =
    {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: ''
    }
    var cropper = $('.imageBox').cropbox(options);
    var img="";
    $('#upload-file').on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
            getImg();
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
        //getImg();
    })
    $('#btnCrop').on('click', function(){
        //alert("图片上传");
        $.ajax({
            url:'{% url "account:my_image" %}',
            type:'POST',
            data:{"img":img},
            success:function (e) {
                if(e==1){
                    parent.location.reload(); }
                else {
                    alert("sorry,the picutre can't been uploaded.")
                }
            },
        });
    })

    function getImg(){
        img = cropper.getDataURL();
        $('.cropped').html('');
        $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;border-radius:180px;margin-top:4px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
        $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;border-radius:1280px;margin-top:4px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
        $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;border-radius:64px;margin-top:4px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
        }

    $(".imageBox").on("mouseup",function(){
         getImg();
          });

    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
});
</script>
复制代码

界面:

4、页面入口:设置一个按钮,用layer.js实现弹出imagecrop.html页面

复制代码
<button class="btn btn-primary btn-lg" id="upload_image" onclick="upload_image_layer()">upload image </button>

    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    <script type="text/javascript">
    function upload_image_layer() {
        //alert("函数执行了" );
        layer.open({
            area:['680px','600px'],
            title:"上传图像",
            type:2,
            content:"{% url 'my_image' %}", 
        });
    }
    </script>
复制代码

5、设置url

  对应上面的{% url 'my_image' %},在urls.py中设置:url(r'^my-image/$',views.my_image,name="my_image"),

6、注意事项:

  • 可在imagecrop.css中修改裁剪页面的样式,如把正方形框改为圆形框;
  • 图片存在数据表中,也可修改存在文件中,则看另一篇关于上传文件的文章;

posted on   sdlyxyf  阅读(647)  评论(0编辑  收藏  举报

编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示