jcrop 网页截图工具(插件)开发

今天给大家介绍一下一个web 中经常会用到的截图(如：头像等)工具：

Jcrop演示

项目结构：

效果图：

这个很有用：

看到这些，大家也想自己试试吧

===========================================

代码部分：

===========================================

准备工作：

下载：Jcrop-0.9.10 (zip format)

解压后放入到你的项目里面，就如上面的项目结构一样...

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial1.html

复制代码 代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jcrop - Hello World

This example demonstrates the default behavior of Jcrop.
Since no event handlers have been attached it only performs
the cropping behavior.

Jcrop Home |
Manual (Docs)

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial2.html

复制代码 代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jcrop - Event Handlers

class="coords"
onsubmit="return false;"
action="http://example.com/post.php">

X1
Y1
X2
Y2
W
H

An example with a basic event handler. Here we've tied
several form values together with a simple event handler invocation.
The result is that the form values are updated in real-time as
the selection is changed using Jcrop's onChange handler.

That's how easily Jcrop can be integrated into a traditional web form!

Jcrop Home |
Manual (Docs)

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial3.html

 
   
   
   
   

    
    
    
    复制代码 代码如下:
   
   
   
   
   
   
   
   
 
    
    
    
    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
Jcrop - Aspect ratio w/ preview pane
 
    
    
    
    





 
    
    
    
    
 
    
    
    
    
An example implementing a preview pane. Obviously the most visual demo, the preview pane is accomplished entirely outside of Jcrop with a simple jQuery-flavored callback. This type of interface could be useful for creating a thumbnail or avatar. The onChange event handler is used to update the view in the preview pane. 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
Jcrop Home | Manual (Docs) 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    
 
    
    
    
    

   
   
   
   
/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial4.html

复制代码 代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jcrop - Animations/Transitions

Enable fading (bgFade: true)

Use experimental shader (shade: true)

Experimental shader active.
Jcrop now includes a shading mode that facilitates building
better transparent Jcrop instances. The experimental shader is less
robust than Jcrop's default shading method and should only be
used if you require this functionality.

Animation/Transitions.
Demonstration of animateTo API method and transitions for bgColor
and bgOpacity options. Color fading requires inclusion of John Resig's
jQuery Color
Animations plugin. If it is not included, colors will not fade.

Jcrop Home |
Manual (Docs)

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial5.html

复制代码 代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jcrop - API Demo

setSelect
animateTo
Release
Disable

Re-Enable
Destroy!
Attach Jcrop

Option Toggles

Aspect ratio
minSize/maxSize setting

Allow new selections
Selection can be moved
Resizable selection

Change Image

Pool
Sago
Sago w/ outerImage

Jcrop Home |
Manual (Docs)