未来往事
每一天,努力让梦想更近一些,遇见更好的未来。 [2017年 第42周/共52周]

JQuery 插件的编写

jquery的插件机制

为了方便用户创建插件,jquery提供了$.extend()和$.fn.extend()方法。
$.extend(object) ,用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法.
例如 jquery内置的 ajax方法都是用$.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。

  1. $.extend({
  2. minValue: function (a, b) {
  3. // 比较两个值,返回最小值
  4. return a < b ? a : b;
  5. }
  6. });
  7. //调用
  8. var i = 100; j = 101;
  9. var min_value = $.minValue(i, j); // min_value 等于 100
+阅读全文

jQuery图片裁剪插件Cropper

Cropper:一个简单的jQuery前端图片裁剪插件。

功能特性:

支持选项
支持方法
支持事件
支持触屏 (移动端)
支持缩放
支持旋转
支持翻转
支持 canvas
支持多个 croppers
跨浏览器支持

主要文件Main:

dist/
├── cropper.css     ( 5 KB)
├── cropper.min.css ( 4 KB)
├── cropper.js      (67 KB)
└── cropper.min.js  (24 KB)

使用介绍:



已知问题:

1.关于getCroppedCanvas方法:canvas.drawImage API 在某些 Mac OS / iOS 浏览器上将会根据 EXIF 方向自动旋图片,所以输出的剪裁画布可能不正确。要修复这个问题,你需要上传剪裁的数据到服务器上完成剪裁的操作,查看例子:Crop Avatar。或者你也可以在使用 cropper 之前处理一下 EXIF方向。
PS:cropper EXIF照片旋转方向前端处理方法参考:
 (a)Exif.js读取图像的元数据
 (b)利用exif.js解决IOS系统手机上传竖拍照片旋转90度问题
 (c)H5中图片上传的那些坑
2.已知的 iOS 资源限制: 由于 IOS 设备会限制内存,浏览器也许会在你剪裁一张大图(iPhone 相机分辨率)的时候崩溃掉。要避免这个问题,你需要在使用 cropper 之前重置图片大小(小于1024 px,如使用localResizeIMG4压缩图片)。

Demo案例参考:

本站Demo参考-建议使用手机浏览器打开测试
点击在新窗口中浏览此图片
+阅读全文