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中修改裁剪页面的样式，如把正方形框改为圆形框；
• 图片存在数据表中，也可修改存在文件中，则看另一篇关于上传文件的文章；

转载于:https://www.cnblogs.com/sdlyxyf/p/10608448.html