演示webuploader和cropperjs图片裁剪上传

最近有个项目要在浏览器端裁剪并上传图片。由于缺乏人力,只能我上阵杀敌。通过参考各种文章,最后决定用cropperjs进行图片裁剪,用webuploader上传文件。本文涉及到的知识至少有Java基础、SpringMVC、thymeleaf模版引擎、JS基础、JQuery基础、Bootstrap组件,但是文章重点只是cropperjs和webuploader的组合运用,其他的都是辅助。

  • *2.1 选择文件按钮

previewImg用于预览上传后的图片;picker用于选择图片,webuploader会自动给picker赋予选择文件的特性。fileInput用于接收文件数据。


    选择图片

下面代码给fileInput组件触发了点击事件

    $("#picker").on('click', function () {
        $("#fileInput").trigger("click");
    });
  • *2.2 定义组件参数和事件

以下代码定义上传组件对象

    var uploader = WebUploader.create({
        auto: true,// 选完文件后,是否自动上传。
        server: '/upload',
        fileSingleSizeLimit: 2 * 1024 * 1024,
        duplicate: true,
        accept: {// 只允许选择图片文件。
            title: 'Images',
            extensions: 'jpg,jpeg,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },
        //如果有表单数据要上传,可以给formData赋值
        formData: {
            id: 0
        }
    });

以下代码定义上传组件事件。WebUploader组件不提供UI,如果需要定制界面,实现下面的方法即可。

    //提交额外的表单数据
    uploader.on('uploadBeforeSend', function (object, data, header) {
        data.id = $('#id').val();
    });

    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        $('#file_list').append('' +
            '' + file.name + '' +
            '等待上传...' +
            '');
    });

    // 上传成功
    uploader.on('uploadSuccess', function (file, response) {
        $('#' + file.id).find('p.state').text('已上传');
        console.log(response._raw);
        var object = $.parseJSON(response._raw);
        //给预览组件赋值
        $('#previewImg').attr("src", object.url);
    });

    // 上传发生错误
    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

    // 上传中
    uploader.on('startUpload', function (file, rs) {
        console.log("文件正在上传中,请稍候");
    });
  • *2.3 定义裁剪组件参数和事件

以下代码定义裁剪图片的对话框,cropperImage是上传后的图片,被裁剪的目标对象。


                ×
                裁剪图片

                关闭
                保存

    var cropperImage = $("#cropperImage");
    var cropperOptions = {
        viewMode: 1,
        dragMode: 'none',
        aspectRatio: 1,
        background: false,
        autoCropArea: 0.6,
        crop: function (event) {
            //裁剪的实时事件
            console.log(event.detail.width);
            console.log(event.detail.height);
        },
        ready: function () {
            //限定裁剪区域大小为500
            cropperImage.cropper('crop');
            cropperImage.cropper('setData', {
                width: 500,
                height: 500
            })
        }
    };
  • *2.5 触发裁剪和上传事件

fileInput组件的change事件会采用FileReader对象获得上传的Image,初始化cropperjs裁剪方法。

    $("#fileInput").on('change', function () {
        var file = this.files[0];
        //定义读文件对象
        var reader = new FileReader();
        reader.onload = function () {
            imageOnload(reader.result);

        };
        reader.readAsDataURL(file);//File对象转换为dataURL
    });

    //图片对象加载方法
    function imageOnload(url) {
        var cropperImg = new Image();
        cropperImg.src = url;
        //destroy方法是为了重入不出错
        cropperImage.cropper('destroy').attr('src', url).cropper(cropperOptions);
        cropperImg.onload = function () {
            //弹窗裁剪
            $('#cropperImageModal').modal();
            $("#modalClose").on('click', function () {
                $("#fileInput").val('');
                $('#cropperImageModal').modal('hide');
            });

            $("#modalSubmit").on('click', function () {
                var canVas = $("#cropperImage").cropper("getCroppedCanvas", {});//获取裁剪后得到的canvas数据
                var file = convertBase64UrlToBlob(canVas.toDataURL('image/jpeg', '0.0'));//将canvas转换为Blob格式
                uploader.addFiles(file);//将裁剪后的图片添加进webuploader上传到后台
                $('#cropperImageModal').modal('hide');
                $("#fileInput").val('');
            });
        };
    }

采用 cropperImage.cropper('getCroppedCanvas').toblob(function(blob){})也可以获取图片二进制对象,但是默认是png格式,体积很大,不利于网络传输,采用下面的方法可以指定图片格式。

    /**
     * base64转为blob,图片为jpeg格式
     */
    function convertBase64UrlToBlob(urlData) {
        //去掉url的头,并转换为byte
        var bytes = window.atob(urlData.split(',')[1]);
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {type: 'image/jpeg'});
    }
  • *2.6 后端接口实现

@Controller
public class IndexController {

    protected final Logger logger = LoggerFactory.getLogger(getClass());

    @RequestMapping("/index")
    public String list(ModelMap map) {
        return "index";
    }

    @PostMapping("/upload")
    @ResponseBody
    public UploadFileVo uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("id") Integer id, HttpServletResponse response) {
        response.setContentType("text/html");
        //保存图片到服务端,返回访问地址
        UploadFileVo uploadFileVo = new UploadFileVo();
        //这里为了演示,返回一张网图
        uploadFileVo.setUrl("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png");
        logger.info("上传成功,url:{},id:{}", uploadFileVo.getUrl(), id);
        return uploadFileVo;
    }

}
  • 2.7 最终效果图
    演示webuploader和cropperjs图片裁剪上传

Original: https://www.cnblogs.com/xiaoyangjia/p/15677347.html
Author: 编码砖家
Title: 演示webuploader和cropperjs图片裁剪上传

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/578123/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 运维故障收集-考勤机无法连接考勤机网关系统故障验证流程

    博客园 :当前访问的博文已被密码保护 请输入阅读密码: Original: https://www.cnblogs.com/linuxshare/p/16474967.htmlAu…

    Linux 2023年6月6日
    064
  • spingboot使用redis连接池报错

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年9月14日
    0206
  • Kafka部署安装及简单使用

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年11月7日
    0196
  • [LINUX] Arch Linux 硬盘拷贝式装系统+新增 home 分区

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年9月10日
    0278
  • Git 分支管理

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月30日
    0238
  • POJ1322Chocolate–概论DP

    每次从包装中取出一块巧克力并放在桌子上。如果桌子上有两个相同颜色的巧克力,则将这两个丢掉。如果包中有C种颜色的巧克力(颜色均匀分布),从包装中取出N个巧克力后,桌子上确实有M个巧克…

    Linux 2023年6月7日
    090
  • 详解Redis基本命令

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年9月14日
    0183
  • 普通 Docker 与 Kubernetes 对比

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年10月15日
    0207
  • Mac安装php和redis扩展

    Mac上有特定的包管理工具homebrew,也叫brew,这里的php安装用的就是brew 1安装php brew install php@7.0。 brw安装会自动管理依赖,所以…

    Linux 2023年5月28日
    049
  • Wine 运行百度云盘 中文乱码解决;wine中文乱码解决;fedora 34 运行百度网盘;

    今天需要下个 imagenet 的 ILSVRC2012 数据集,找到了网友在百度网盘中分享的下载好的; 但是因为本人使用的是 fedora 34 系统,所以尝试下载 百度网盘 l…

    Linux 2023年6月14日
    077
  • linux 打印机管理输出等命令

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月26日
    0254
  • 数字证书工作原理 图文并茂

    SSL证书和HTTPS的关系 HTTPS在HTTP的基础上加入了SSL加密协议,HTTP是明文传输,HTTPS是加密传输。 A quick definition:HTTPS sta…

    Linux 2023年6月6日
    073
  • Redis 通过key前缀获取所有key的值

    Redis 通过key前缀获取所有key的值 public void getRedis(String cardId) { // 获取所有的key Set keys = redisT…

    Linux 2023年5月28日
    046
  • nginx源码编译安装(详解)

    nginx编译安装 编译安装大致步骤: 安装步骤: 官网下载合适的版本,建议选择稳定版本。 官网地址:https://nginx.org wget https://nginx.or…

    Linux 2023年5月27日
    097
  • shell脚本中 /dev/null 的用途

    /dev/null 是一个特殊的设备文件,它丢弃一切写入其中的数据 可以将它 视为一个黑洞, 它等效于只写文件, 写入其中的所有内容都会消失, 尝试从中读取或输出不会有任何结果,同…

    Linux 2023年6月13日
    065
  • centos7安装zabbix-agent客户端

    1.官方下载zabbix-agent安装包链接:wget https://cdn.zabbix.com/zabbix/binaries/stable/5.4/5.4.6/zabbi…

    Linux 2023年6月13日
    081
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球