jcrop 网页截图工具(插件)开发_Java教程-查字典教程网

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

摘要：今天给大家介绍一下一个web中经常会用到的截图(如：头像等)工具：Jcrop演示项目结构：效果图：这个很有用：看到这些，大家也想自己试试吧=...

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

Jcrop演示

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

项目结构：

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

效果图：

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

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

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

这个很有用：

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

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

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

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

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

代码部分：

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

准备工作：

下载：Jcrop-0.9.10 (zip format)

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

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

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

<head>

<title>Jcrop » Tutorials » Hello World</title>

jQuery(function($){

// How easy is this??

$('#target').Jcrop();

});

</script>

</head>

<body>

<div>

<h1>Jcrop - Hello World</h1>

<p>

<b>This example demonstrates the default behavior of Jcrop.</b>

Since no event handlers have been attached it only performs

the cropping behavior.

</p>

<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |

<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>

</div>

</body>

</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial2.html 复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

<head>

<title>Jcrop » Tutorials » Event Handler</title>

jQuery(function($){

$('#target').Jcrop({

onChange: showCoords,

onSelect: showCoords,

onRelease: clearCoords

});

// Simple event handler, called from onChange and onSelect

// event handlers, as per the Jcrop invocation above

function showCoords(c)

{

$('#x1').val(c.x);

$('#y1').val(c.y);

$('#x2').val(c.x2);

$('#y2').val(c.y2);

$('#w').val(c.w);

$('#h').val(c.h);

};

function clearCoords()

{

$('#coords input').val('');

};

</script>

</head>

<body>

<div>

<h1>Jcrop - Event Handlers</h1>

<form id="coords"

class="coords"

onsubmit="return false;"

action="http://example.com/post.php">

<div>

</div>

</form>

<p>

<b>An example with a basic event handler.</b> 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 <em>onChange</em> handler.

</p>

<p>

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

</p>

<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |

<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>

</div>

</body>

</html>

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

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

<head>

<title>Jcrop » Tutorials » aspectRatio w/ Preview</title>

jQuery(function($) {

// Create variables (in this scope) to hold the API and image size

var jcrop_api, boundx, boundy;

$('#target').Jcrop({

onChange : updatePreview,

onSelect : updatePreview,

aspectRatio : 1

}, function() {

// Use the API to get the real image size

var bounds = this.getBounds();

boundx = bounds[0];

boundy = bounds[1];

// Store the API in the jcrop_api variable

jcrop_api = this;

});

function updatePreview(c) {

if (parseInt(c.w) > 0) {

var rx = 100 / c.w;

var ry = 100 / c.h;

$('#preview').css({

width : Math.round(rx * boundx) + 'px',

height : Math.round(ry * boundy) + 'px',

marginLeft : '-' + Math.round(rx * c.x) + 'px',

marginTop : '-' + Math.round(ry * c.y) + 'px'

});

}

});

</script>

</head>

<body>

<div>

<h1>Jcrop - Aspect ratio w/ preview pane</h1>

<table>

<tr>

<td>

<div>

</div>

</td>

<td>

<div>

</div>

</td>

</tr>

</table>

<p>

<b>An example implementing a preview pane.</b> 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.

</p>

<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>

</div>

</body>

</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial4.html 复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

<head>

<title>Jcrop » Tutorials » Animations / Transitions</title>

jQuery(function($){

var jcrop_api;

$('#target').Jcrop({

bgFade: true,

bgOpacity: .3,

setSelect: [ 60, 70, 540, 330 ]

},function(){

jcrop_api = this;

});

$('#fadetog').change(function(){

jcrop_api.setOptions({

bgFade: this.checked

});

}).attr('checked','checked');

$('#shadetog').change(function(){

if (this.checked) $('#shadetxt').slideDown();

else $('#shadetxt').slideUp();

jcrop_api.setOptions({

shade: this.checked

});

}).attr('checked',false);

// Define page sections

var sections = {

anim_buttons: 'Animate Selection',

bgo_buttons: 'Change bgOpacity',

bgc_buttons: 'Change bgColor'

};

// Define animation buttons

var ac = {

anim1: [217,122,382,284],

anim2: [20,20,580,380],

anim3: [24,24,176,376],

anim4: [347,165,550,355],

anim5: [136,55,472,183]

};

// Define bgOpacity buttons

var bgo = {

Low: .2,

Mid: .5,

High: .8,

Full: 1

};

// Define bgColor buttons

var bgc = {

Red: '#900',

Blue: '#4BB6F0',

Yellow: '#F0B207',

Green: '#46B81C',

White: 'white',

Black: 'black'

};

// Create fieldset targets for buttons

for(i in sections)

insertSection(i,sections[i]);

// Create animation buttons

for(i in ac) {

$('#anim_buttons').append(

$('<button />').append(i).click(animHandler(ac[i])), ' '

);

}

// Create bgOpacity buttons

for(i in bgo) {

$('#bgo_buttons').append(

$('<button />').append(i).click(setoptHandler('bgOpacity',bgo[i])), ' '

);

}

// Create bgColor buttons

for(i in bgc) {

$('#bgc_buttons').append(

$('<button />').append(i).css({

backgroundColor: bgc[i],

color: ((i == 'Black') || (i == 'Red'))?'white':'black'

}).click(setoptHandler('bgColor',bgc[i])), ' '

);

}

// Function to insert named sections into interface

function insertSection(k,v) {

$('#interface').append(

$('<fieldset></fieldset>').attr('id',k).append(

$('<legend></legend>').append(v)

)

);

};

// Handler for option-setting buttons

function setoptHandler(k,v) {

return function() {

var opt = { };

opt[k] = v;

jcrop_api.setOptions(opt);

return false;

};

// Handler for animation buttons

function animHandler(v) {

return function() {

jcrop_api.animateTo(v);

return false;

};

$('#anim_buttons').append(

$('<button></button>').append('Bye!').click(function(){

jcrop_api.animateTo(

[300,200,300,200],

function(){ this.release(); }

);

return false;

})

);

$('#interface').show();

});

</script>

</head>

<body>

<div>

<h1>Jcrop - Animations/Transitions</h1>

<div><label><input type="checkbox" id="fadetog" /> Enable fading (bgFade: true)</label></div>

<div><label><input type="checkbox" id="shadetog" /> Use experimental shader (shade: true)</label></div>

<b>Experimental shader active.</b>

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.

</p>

<p>

<b>Animation/Transitions.</b>

Demonstration of animateTo API method and transitions for bgColor

and bgOpacity options. Color fading requires inclusion of John Resig's

jQuery <a href="http://plugins.jquery.com/project/color">Color

Animations</a> plugin. If it is not included, colors will not fade.

</p>

<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |

<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>

</div>

</body>

</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial5.html 复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

<head>

<title>Jcrop » Tutorials » API Demo</title>

.optdual { position: relative; }

.optdual .offset { position: absolute; left: 18em; }

.optlist label { width: 16em; display: block; }

#dl_links { margin-top: .5em; }

</style>

jQuery(function($){

// The variable jcrop_api will hold a reference to the

// Jcrop API once Jcrop is instantiated.

var jcrop_api;

// In this example, since Jcrop may be attached or detached

// at the whim of the user, I've wrapped the call into a function

initJcrop();

// The function is pretty simple

function initJcrop()//{{{

{

// Hide any interface elements that require Jcrop

// (This is for the local user interface portion.)

$('.requiresjcrop').hide();

// Invoke Jcrop in typical fashion

$('#target').Jcrop({

onRelease: releaseCheck

},function(){

jcrop_api = this;

jcrop_api.animateTo([100,100,400,300]);

// Setup and dipslay the interface for "enabled"

$('#can_click,#can_move,#can_size').attr('checked','checked');

$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);

$('.requiresjcrop').show();

});

};

//}}}

// Use the API to find cropping dimensions

// Then generate a random selection

// This function is used by setSelect and animateTo buttons

// Mainly for demonstration purposes

function getRandom() {

var dim = jcrop_api.getBounds();

return [

Math.round(Math.random() * dim[0]),

Math.round(Math.random() * dim[1]),

Math.round(Math.random() * dim[0]),

Math.round(Math.random() * dim[1])

];

};

// This function is bound to the onRelease handler...

// In certain circumstances (such as if you set minSize

// and aspectRatio together), you can inadvertently lose

// the selection. This callback re-enables creating selections

// in such a case. Although the need to do this is based on a

// buggy behavior, it's recommended that you in some way trap

// the onRelease callback if you use allowSelect: false

function releaseCheck()

{

jcrop_api.setOptions({ allowSelect: true });

$('#can_click').attr('checked',false);

};

// Attach interface buttons

// This may appear to be a lot of code but it's simple stuff

$('#setSelect').click(function(e) {

// Sets a random selection

jcrop_api.setSelect(getRandom());

});

$('#animateTo').click(function(e) {

// Animates to a random selection

jcrop_api.animateTo(getRandom());

});

$('#release').click(function(e) {

// Release method clears the selection

jcrop_api.release();

});

$('#disable').click(function(e) {

// Disable Jcrop instance

jcrop_api.disable();

// Update the interface to reflect disabled state

$('#enable').show();

$('.requiresjcrop').hide();

});

$('#enable').click(function(e) {

// Re-enable Jcrop instance

jcrop_api.enable();

// Update the interface to reflect enabled state

$('#enable').hide();

$('.requiresjcrop').show();

});

$('#rehook').click(function(e) {

// This button is visible when Jcrop has been destroyed

// It performs the re-attachment and updates the UI

$('#rehook,#enable').hide();

initJcrop();

$('#unhook,.requiresjcrop').show();

return false;

});

$('#unhook').click(function(e) {

// Destroy Jcrop widget, restore original state

jcrop_api.destroy();

// Update the interface to reflect un-attached state

$('#unhook,#enable,.requiresjcrop').hide();

$('#rehook').show();

return false;

});

// Hook up the three image-swapping buttons

$('#img1').click(function(e) {

jcrop_api.setImage('demo_files/sago.jpg');

jcrop_api.setOptions({ bgOpacity: .6 });

return false;

});

$('#img2').click(function(e) {

jcrop_api.setImage('demo_files/pool.jpg');

jcrop_api.setOptions({ bgOpacity: .6 });

return false;

});

$('#img3').click(function(e) {

jcrop_api.setImage('demo_files/sago.jpg',function(){

this.setOptions({

bgOpacity: 1,

outerImage: 'demo_files/sagomod.jpg'

});

this.animateTo(getRandom());

});

return false;

});

// The checkboxes simply set options based on it's checked value

// Options are changed by passing a new options object

// Also, to prevent strange behavior, they are initially checked

// This matches the default initial state of Jcrop

$('#can_click').change(function(e) {

jcrop_api.setOptions({ allowSelect: !!this.checked });

jcrop_api.focus();

});

$('#can_move').change(function(e) {

jcrop_api.setOptions({ allowMove: !!this.checked });

jcrop_api.focus();

});

$('#can_size').change(function(e) {

jcrop_api.setOptions({ allowResize: !!this.checked });

jcrop_api.focus();

});

$('#ar_lock').change(function(e) {

jcrop_api.setOptions(this.checked?

{ aspectRatio: 4/3 }: { aspectRatio: 0 });

jcrop_api.focus();

});

$('#size_lock').change(function(e) {

jcrop_api.setOptions(this.checked? {

minSize: [ 80, 80 ],

maxSize: [ 350, 350 ]

}: {

minSize: [ 0, 0 ],

maxSize: [ 0, 0 ]

});

jcrop_api.focus();

});

</script>

</head>

<body>

<div>

<h1>Jcrop - API Demo</h1>

<div>

<span>

<button id="setSelect">setSelect</button>

<button id="animateTo">animateTo</button>

<button id="release">Release</button>

<button id="disable">Disable</button>

</span>

<button id="enable">Re-Enable</button>

<button id="unhook">Destroy!</button>

<button id="rehook">Attach Jcrop</button>

</div>

<legend>Option Toggles</legend>

<div>

<label><input type="checkbox" id="ar_lock" />Aspect ratio</label>

<label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label>

</div>

<div>

<label><input type="checkbox" id="can_click" />Allow new selections</label>

<label><input type="checkbox" id="can_move" />Selection can be moved</label>

<label><input type="checkbox" id="can_size" />Resizable selection</label>

</div>

</fieldset>

<legend>Change Image</legend>

<span>

<button id="img3">Sago w/ outerImage</button>

</span>

</fieldset>

<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |

<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>

</div>

</body>

</html>

【jcrop 网页截图工具(插件)开发】相关文章：

★ 找出链表倒数第n个节点元素的二个方法

★ 将对象转化为字符串的java实例

★ list,set,map,数组之间的相互转换详细解析

★ 基于JAVA中使用Axis发布/调用Webservice的方法详解

★ 深入JAVA对象深度克隆的详解

★ java操作mongodb基础(查询排序输出list)

★ 解析Neatbeans(常见错误) build-impl.xml:305: Compile failed

★ java中servlet实现登录验证的方法

★ java使用动态代理来实现AOP(日志记录)的实例代码

★ java使用Jsoup组件生成word文档

上一篇： AndroidHttpClient使用Cookie应用分析

下一篇： java开发_图片截取工具实现原理

学习工具