基于cropper和sweetalert的简单图片/头像裁剪上传

基本功能

前端基本样式:

进行图片裁剪及上传:

点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储。存储成功后,刷新前端页面,头像改变。

上传成功后:自动刷新网页,更改头像

基本工具

cropper是一个功能强大的jq插件,在指定图片img上添加裁剪框,并根据指定事件对图片按照裁剪框的大小进行裁剪。

crepper还可以对定义图片翻转、放大、移动以及输出裁剪框位置的很多功能,由于此处只是用于头像上传,所以只使用了基本功能。

cropper使用时需要用到jq2.0以上,所以加载cropper之前,一定要先加载jq,不然会报错。

sweetalert是一个界面优美使用简单、完全基于jq的一个模态框插件。由于自己在练习中使用sweetalert作为弹出框窗口,所以此处就没有自己写模态框也没有利用bootstrap的模态框。

后端是使用django进行处理。

基本代码

html:为了方便,使用了bootstrap样式。

加载库:

 <link rel="stylesheet" href="dist/css/bootstrap.min.css">
 <script src="dist/jquery.min.js"></script>
 <script src="js/sweetalert.min.js"></script>
 <script src="js/cropper.min.js"></script>
 <link rel="stylesheet" href="css/cropper.min.css">
    <div class="row">
        <div class=" col-sm-offset-1 col-sm-2 outter">
            {% csrf_token %}
            <div class="thumbnail ">
                <img id="img_thumbnail" src="/media/{{ user.thumbnail }}" alt="头像">
                <div class="btn-wrapper">
                <label class="btn btn-info btn-block btn-sm" id="up-btn">上传头像
                    <input id="up_thumbnail" type="file" style="display: none">
                </label>
            </div>
            </div>
        </div>
    </div>

上传头像的input标签是隐藏在label中的。

css样式:

.row{
  .outter{
    .thumbnail{
      padding: 0;
      border: none;
      background-color: inherit;
      #img_thumbnail{
        width: 100%;
        object-fit: cover;
      }
      .btn-wrapper{
        margin-top: 5px;
      }
    }
  }
}

用的是sass语法,可以转换为css。

这里对图片显示用到了object-fit属性。因为前台显示图片的头像框大小是固定的,有时候上传的头像太小,这个属性可以将该图片填充满头像框。

js代码:

//将base64转换为文件,截取图片后会用到
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type: mime});
}

$(function () {
    var up_thumbnail = $(‘#up_thumbnail‘);  //获取上传文件的input对象

    //选中文件后,触发change事件:
    up_thumbnail.change(function () {
        var file = this.files[0];  //获取图片对象

        //读取文件对象,弹出模态框,对图片进行预览
        filereader = new FileReader();
        filereader.readAsDataURL(file);
        filereader.onload = function () {
            //弹出模态框,模态框的内容content是一个img标签,classname是source-img,这个标签cropper要用到
            swal({
                content: {
                    element: ‘img‘,
                    attributes: {
                        src: this.result,//此处的this.result就是读取的文件数据,放至img标签,进行预览
                        width: 400,
                        className: ‘source-img‘
                    }
                },
                buttons: {
                    cancel: { //取消按钮,点击后为null
                        text: ‘取消‘,
                        closeModal: true,
                        visible: true,
                    },
                    confirm: {   //确认按钮,点击后会返回true
                        text: ‘上传‘,
                        closeModal: false,
                        className: ‘cut-btn‘,
                    }
                },
            }).then((value) => {  //点击按钮后,会将按钮的值传递给value,根据value进行下一步动作
                if (value) {  //如果value为真
                    if ($(".source-img").attr("src") == null) {  //图像框中没有图像,弹出error模态框,1秒后自动关闭
                        swal({
                            icon: ‘error‘,
                            title: ‘没有图片上传‘,
                            timer: 1000
                        });
                    } else {  //图像框中有图像
                        var cas = $(‘.source-img‘).cropper(‘getCroppedCanvas‘);// 获取被裁剪后的canvas
                        var base64 = cas.toDataURL(‘image/jpeg‘); // 转换为base64
                        var picture = dataURLtoFile(base64, file.name);//转换为图片对象

                        //使用ajax对图片文件进行传递
                        // 注意:这里的xfz_ajax是我自己写的对一个小封装,实际上就是自动将csrf_token的值加载到header,直接使用jq的ajax也可以实现。只不过多个步骤而已。
                        var formdata = new FormData();
                        formdata.append(‘thumbnail‘, picture); //前面为主键名,后面为文件对象
                        //使用jq的ajax时,post请求一定要记着带上csrf_token的值。
                        xfz_ajax.post({
                            ‘url‘: ‘/cms/upto_thumbnail/‘,
                            ‘data‘: formdata,
                            ‘processData‘: false,  //使用当前的数据,不用序列化
                            ‘contentType‘: false,//
                            ‘success‘: function (result) {
                                if (result.code === 200) {  //这个后台返回的code信息是我自定义的,上传成功会返回一个resul字典,其中一个key为code,成功值为200
                                    swal({   //上传成功,显示success模态框。其显示的信息为返回的信息。1.5秒后自动关闭模态框,并自动刷新网页
                                        title: result.message,
                                        icon: ‘success‘,
                                        timer: 1500
                                    }).then(() => {
                                        window.location.reload()
                                    })
                                } else {
                                    swal({  //上传失败,弹出失败模态框
                                        title: result.message,
                                        icon: ‘error‘,
                                        timer: 1500
                                    })
                                }
                            }
                        })

                    }

                }
            });

            //在生成模态框之后(只有生成了模态框,才有cropper需要的img标签)时候对cropper进行初始化。
            $(‘.source-img‘).cropper({
                aspectRatio: 1,// 默认比例
                preview: ‘#previewImg‘,// 预览视图,可以不要,如果想要预览,可以将一个img标签的id放进来
                guides: true, // 裁剪框的虚线(九宫格)
                autoCropArea: 0.8, // 0-1之间的数值,定义自动剪裁区域的大小,默认0.8
                movable: false, // 是否允许移动图片
                dragCrop: true, // 是否允许移除当前的剪裁框,并通过拖动来新建一个剪裁框区域
                movable: true, // 是否允许移动剪裁框
                resizable: true, // 是否允许改变裁剪框的
                zoomable: false, // 是否允许缩放图片大小
                mouseWheelZoom: false, // 是否允许通过鼠标滚轮来缩放图片
                touchDragZoom: true, // 是否允许通过触摸移动来缩放图片
                rotatable: false, // 是否允许旋转图片
                crop: function (e) {
                }
            });
        };
    });
});

注意,ajax传递数据由于是用的一个ajax的小封装,省略了csrf_token的过程,使用时传递数据一定要携带csrf_token值。

以上前端代码就已经全部完成了,后端代码我使用的是django,直接利用model获取文件。

@require_POST
@login_required(login_url=‘news:news_index‘)
def upto_thumbnail(request):
    file = request.FILES.get(‘thumbnail‘)
    request.user.thumbnail = file
    request.user.save()
    return result.success(message=‘上传成功!‘)

一个简单实用的头像裁剪上传功能就实现了。

原文地址:https://www.cnblogs.com/ohahastudy/p/11179354.html

时间: 2024-11-05 06:11:52

基于cropper和sweetalert的简单图片/头像裁剪上传的相关文章

springMVC 头像裁剪上传并等比压

第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对 假设是ie下图片预览效果是滤镜做的  做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传上去再预览 1.先看一下我引入的js <script src="${adminBasePath}resources/js/jquery.1.8.3.js"></script> <script src="${adminBasePath}resource

html5 canvas头像裁剪上传

效果: 在博客里有另一篇头像裁剪是用actionscript实现的头像裁剪上传,这里拥护html5,用canvas实现下.前两次的右键是为了说明不是用flash做的. 如果想要更严谨的,有技术支持的这个东西的话,可以用kissy的http://gallery.kissyui.com/imgcrop/2.0/guide/index.html. 原理很简单:裁剪框是用html做的,canvas的作用在于每次移动,变形后根据裁剪框的位置坐标以及大小,绘制图像的部分并缩放,还有绘制裁剪框区域外的灰色区域

java头像裁剪上传

原文:java头像裁剪上传 源代码下载地址:http://www.zuidaima.com/share/1550463771118592.htm jsp页面实现头像裁剪上传,带进度条,后台java接收 上传成功后

超少代码的头像裁剪上传

效果: as上传的好处在于裁剪工作在客户端就完成了,而用jcrop的话要记录裁剪大小,位置坐标等,传给服务端才能裁剪 代码很简单 1 package 2 { 3 import flash.display.*; 4 import flash.events.Event; 5 import flash.utils.ByteArray; 6 import flash.events.*; 7 import flash.net.*; 8 import com.adobe.images.JPGEncoder;

jfinal头像裁剪上传服务器

前端页面完整代码,复制可用,记得导入库文件 <!DOCTYPE html> <html lang="en"> <head> <title>Aspect Ratio with Preview Pane | Jcrop Demo</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

基于JSP+Servlet+JavaBean的图片或文件上传

基于JSP+Servlet+JavaBean的图片或文件上传 一.概述 现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?大家可以在在线视频课程进修学习<基于JSP+Servlet+JavaBean的人力资源管理系统开发>中第22课-项目开发-其它功能完善-图片

基于h5的图片无刷新上传(uploadifive)

基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploadifive是一家的,他们都是基于jquery的插件,都支持多文件异步上传,支持显示上传进度,不同的是uploadify基于swfUpload这一开源无刷新上传插件开发,基于flash,而uploadifive则是基于html5,不依赖于flash. 基于他们的不同点,我们可以根据自己的需求来进行选

头像截图上传三种方式之一(一个简单易用的flash插件)(asp.net版本)

flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/details/12855915     并且加入了自己的解析,以供之后的参考. 官网提供的demo包,包含了php,jsp,asp,aspx的demo. 1.Demo中,avatar.swf是执行上传的flash文件:default.jpg是默认显示的图片:demo.html是demo,可以直接复制里面

小议头像预览裁剪上传的实现

在做头像上传的时候,浏览器默认是无法取得本地图片的,当然 HTML5 是可以的.不过IE6-8怎么破?目前比较通用的方案都是 flash 解决. 说道头像预览和裁剪,我最熟悉的就是 Discuz 的那个了,非常方便好用.不仅可以选择本地图片,还能直接调用摄像头拍摄,当然前提是你必须有个摄像头. 于是我心血来潮的想把他剥离出来给项目用,于是有就了此文..我就不说怎么提取怎么调用,就简单的谈谈他是怎么处理图片好了,反正不是我们想的那样,和我想的出入非常大. 这个插件呢,差不多分为四步处理:1. 前台