django + cropper 实现头像预览裁剪上传

最新推荐文章于 2024-06-03 16:05:12 发布

置顶

ck07

最新推荐文章于 2024-06-03 16:05:12 发布

阅读量2.1k

点赞数

分类专栏： js django 文章标签： django 前端 html 图片 api

本文链接：https://blog.csdn.net/qq_21570029/article/details/79972138

版权

本文介绍了如何结合前端Cropper插件和Django后台，实现实时预览并裁剪图片上传的功能。Cropper提供API用于图片裁剪，裁剪后的base64编码图片转换为blob发送至后端存储。

摘要由CSDN通过智能技术生成

思路：

使用cropper这个前端插件，对图片进行裁剪，cropper生成的截图，是一串base64的编码，再将其转为blob格式，传到后端，进行存储。简单的说就是前端裁剪好的图片，传到后端，而不是将裁减的数据值传到后端，在后端进行裁剪.

cropper的api:

https://github.com/fengyuanchen/cropper

cropper的简单使用：

html

<div>
  <img id="image" src="picture.jpg">
</div>

css

img {
  max-width: 100%; /*必填*/
}

var $image = $('#image');

$image.cropper({
  aspectRatio: 16 / 9,
  crop: function(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  }
});

//实例化
var cropper = $image.data('cropper');

使用cropper进行图片的裁剪

导入：
  <script src="{
   {
   STATIC_URL}}js/jquery.js"></script>
  <link  rel="stylesheet" type="text/css" href="{
   {
   STATIC_URL}}css/cropper.css" />
    <script src="{
   {
   STATIC_URL}}js/cropper.js" type="text/javascript" ></script>

css:
  body {
            font-size: 16px;
            font-family:"Microsoft YaHei",Arial, Helvetica, sans-serif
        }
        *,
        *:before,
        *:after {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                    box-sizing: border-box;
        }

        .crop-picker-wrap {
            position: relative;
            width: 100px;
            height: 30px;
            overflow: hidden;
        }
        .crop-picker {