YofFawn的cropTool;

在使用croptool.js时,如果图片的分辨率过低,则无法裁剪超过分辨率的大小。比如说

function chooseImg(event){
  var files = event.files || event.dataTransfer.files,
  file = files[0] || files;
  event.value = '';
  window.clip = new Clip({
    dragBoxClass: 'block', //裁剪框类名
    clipRadio: 1 / 1, //裁剪比例 宽/高 传0或空或不传等于不设置比例
    //单位px 仅为裁剪框的宽高 不等同裁剪后最终图片宽高
    initialHeight: 100, //裁剪框初始高度
    initialWidth: 100, //裁剪框初始宽度
    minHeight: 100, //裁剪框最小高度
    minWidth: 100, //裁剪框最小宽度
    maxWidth: 450, //裁剪框最大宽度 不会大于裁剪区域宽度 取值需大于最小宽高
    maxHeight: 450, //裁剪框最大高度 不会大于裁剪区域高度
    cornerColor: '#39f', //裁剪框颜色
    encode: 'base64', //文件类型
    type: 'png', //保存图片类型
    name: 'img', //文件名字
    quality: 1, //压缩质量
    //裁剪完成
    onDone: function (e) {
      console.log(e);
      //return false;
      document.getElementById('previewImg').src = e;
    },
    onCancel: function(){     }
  });
  clip.setSize(file);
}

  

在上面这个函数中,明确说明裁剪框最大的高度和宽度为450,但是如果选择图片文件的分辨率为180*180,那么裁剪框的最大裁剪范围也会变成180*180。

注意css样式。此时裁剪框最大是180*180;

 
解决方法:打开croptool.js做以下修改
找到以下两个三元运算
_this.opt.maxWidth=parseInt(_this.opt.maxWidth>w?w:_this.opt.maxWidth);
_this.opt.maxHeight=parseInt(_this.opt.maxHeight>h?h:_this.opt.maxHeight);
修改为

_this.opt.maxWidth=parseInt(_this.opt.maxWidth>w?_this.opt.maxWidth:_this.opt.maxWidth);
_this.opt.maxHeight=parseInt(_this.opt.maxHeight>h?_this.opt.maxHeight:_this.opt.maxHeight);

修改后效果:

因为使用开发者工具所以裁剪区域变形,不使用开发者工具时是正常的。重点是css样式。

最新文章

  1. ecshop循环foreach,iteration,key,index
  2. DSP using MATLAB 示例Example2.4
  3. 谈谈对MVC的理解
  4. Java 获取amr音频格式的音频长度
  5. python三元运算符
  6. Property type 'id<tabBarDelegate>' is incompatible with type 'id<UITabBarDelegate> _Nullable' inherited from 'UITabBar'
  7. html5_canvas初学
  8. java中自动装箱带来的性能问题
  9. 【汇编语言】DOXBox 0.74 常用debug命令
  10. Nacos系列:基于Nacos的注册中心
  11. BGP: 容易实现路由备份,不容易实现等价负载均衡。
  12. 【转载】Hadoop 2.7.3 和Hbase 1.2.4安装教程
  13. linux(centos 7)下安装elasticsearch - head插件(端口占用,防火墙关闭)
  14. Spring Cloud(Dalston.SR5)--Hystrix 断路器
  15. materializecss的水波纹效果
  16. 使用WPF制作视频监控多画面切换
  17. 转载:Java、C#双语版配套AES加解密示例
  18. BZOJ4732. [清华集训2016]数据交互(树链剖分+线段树+multiset)
  19. JavaScript实现邮箱后缀提示功能
  20. c++string标准输入和getline()整行读入

热门文章

  1. VUE3 之 状态动画 - 这个系列的教程通俗易懂,适合新手
  2. ActiveMQ 笔记—01
  3. python写一个web目录扫描器
  4. 【论文阅读】CVPR2022: Learning from all vehicles
  5. [应用软件] VMware Workstation 12.0.0 Pro 正式版下载【附注册机+注册码】
  6. 半吊子菜鸟学Web开发 -- PHP学习 1-基础语法
  7. Mysql查询优化器之关于JOIN的优化
  8. Oracle入门基础(十一)一一PL/SQL基本语法
  9. Java 线程具有五中基本状态 ?
  10. thrift源码分析