QQ截图20180828092008

引入必要的js和css核心文件
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
构建html,可以将图片或canvas直接包裹到一个块级元素中

<div class="container">
  <img src="picture.jpg">
</div>
初始化插件,可以使用$.fn.cropper方法来初始化该图片剪裁插件。

$('.container > img').cropper({
  aspectRatio: 16 / 9,
  crop: function(data) {
    // 出来裁切后的图片数据.
  }
});

注意事项:

注意:剪裁区域的尺寸继承自图片的父容器(包裹容器),所以要确保包裹图片的是一个可见的块级元

输出的剪裁数据基于原始的图片尺寸,你可以使用这些数据直接剪裁图片。

如果你要使用跨源图片来作为剪裁图片,请确保你的浏览器支持HTML5 CORS settings attributes,并且你的图片服务器支持Access-Control-Allow-Origin属性。

文档地址:http://www.jq22.com/jquery-info9322
官方网址:http://fengyuanchen.github.io/cropper/

jquery validate自定义验证规则

jQuery.validator.addMethod("check_user", function(value, element) { var check = /^[A-Za-z\s]+$/; //this.optional(element)如果元素...

阅读全文

jquery-fancybox JavaScript图片库,支持pc,响应式

官网地址 http://fancyapps.com/fancybox/3/ document:http://fancyapps.com/fancybox/3/docs/#usage github https://github.com/fancyapps/fancybox 兼容性 ...

阅读全文

jquery 瀑布流插件 masonry

github https://github.com/desandro/masonry Masonry Cascading grid layout library Masonry works by placing elements in optimal position based on a...

阅读全文

评论已经关闭。