zoukankan      html  css  js  c++  java
  • jQuery EasyUI 的截图插件(imgAreaSelect)用法

    目前大多数的SNS网站都有自定义头像的功能,而自定义头像又有很多种方法可以实现,比如说大多数网站都在使用Flash截图,还有就是 Javascript截图。而如果自己写一个Javascript截图功能的话比较复杂,而且对于浏览器的兼容也不是很好,jQuery就给我们提供了这 样的插件——imgAreaSelect

    官方网站:http://odyniec.net/projects/imgareaselect/

    这里介绍一下快速使用这个插件的方法:

    首先在官方网站下载这个插件(http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.1.zip),目前版本是0.9.1,在下载的插件中会有scripts 和CSS文件夹,scripts文件夹会包含jQuery文件和imgareaSelect文件,CSS文件夹则提供一些默认的样式和一些生动的样式,这个用户可以自己选择使用哪一种方式。

    准备工作完成后,我们可以建立一个HTML 页面,在页面的<head>之间加入下面的代码:

    <head>

    <link rel=”stylesheet” type=”text/css” href=”css/imgareaselect-default.css” />
    <script type=”text/javascript” src=”scripts/jquery.min.js”></script>
    <script type=”text/javascript” src=”scripts/jquery.imgareaselect.pack.js”></script>

    </head>

    然后调用imgAreaSelect 方法来激活图片的选中区域
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘img#photo’).imgAreaSelect({ handles: true, onSelectEnd: someFunction });
    });
    </script>

    imgAreaSelect 方法有很多参数可以定义:

    参数 描述
    aspectRatio 设定选取区域的显示比率,如:”4:3
    autoHide
    如果设置为true,当选择区域选择结束时消失,默认值为:false
    classPrefix 这是一个字符串,表示插件样式的类名加前缀,默认值为"imgareaselect"
    disable 如果设置为true,禁用插件
    enable
    如果设置为true,插件被重新启用
    fadeSpeed 如果设置为大于零的数字,则用优美的淡入/淡出动画来显示图片,默认值为 false
    handles 如果设置为true,调整手柄则会显示在选择区域内,如果设置为"corners",则只有角处理会显示调整手柄,默认值为false
    hide
    如果设置为true,选择范围是隐藏
    imageHeight 图片的真实高度 (if scaled with the CSSwidthandheightproperties)
    imageWidth 真实图片宽度 (if scaled with the CSSwidthandheightproperties)
    instance 如果设置为true,imgAreaSelect() 调用返回一个imgAreaSelect绑定到的图像的实例,使您可以使用它的API方法
    keys 启用/禁用键盘支持,默认值为false
    maxHeight 选取的最大高度(单位为像素)
    maxWidth 选取的最大宽度(单位为像素)
    minHeight 选取的最小高度(单位为像素)
    minWidth 选取的最小宽度(单位为像素)
    movable
    确定选取是否可以移动,默认值为true

    parent
    一个jQuery对象或选择字符串,指定被追加到父元素,默认值为"body"

    persistent 如果设置为true,选择区以外的点击将不会启动一个新的选区(即用户将只能移动/调整现有的选择范围),默认值为false
    resizable
    确定是否选择面积应可调整大小,默认值为true

    show
    如果设置为true,选区则会显示
    x1
    y1
    最初选择区域的左上角坐标
    x2
    y2
    最初选择区域的右上角坐标
    zIndex 插件元素的z-index值,正常情况下imgAreaSelect会自动分配,但有少数情况,有必要将其设置为制定值
    onInit 插件初始化时的回调函数
    onSelectStart 插件开始选择时的回调函数
    onSelectChange 插件改变选区时的回调函数
    onSelectEnd 插件结束选区时的回调函数

    以上是翻译以后的描述,读者也可以浏览原始文档:
    http://odyniec.net/projects/imgareaselect/usage.html


  • 相关阅读:
    Azure 虚拟机安全加固整理
    AzureARM 使用 powershell 扩容系统磁盘大小
    Azure Linux 云主机使用Root超级用户登录
    Open edX 配置 O365 SMTP
    powershell 根据错误GUID查寻错误详情
    azure 创建redhat镜像帮助
    Azure Powershell blob中指定的vhd创建虚拟机
    Azure Powershell 获取可用镜像 PublisherName,Offer,Skus,Version
    Power BI 连接到 Azure 账单,自动生成报表,可刷新
    Azure powershell 获取 vmSize 可用列表的命令
  • 原文地址:https://www.cnblogs.com/pzrr/p/1974429.html
Copyright © 2011-2022 走看看