欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-02 18:45:04
今天给大家介绍一下一个web 中经常会用到的截图(如:头像等)工具: jcrop演示 项目结构: 效果图: 这个很有用: 看到这些...

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

jcrop演示

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

项目结构:

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

效果图:

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

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

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

这个很有用:

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

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

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

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

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

代码部分:

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

准备工作:

下载: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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jcrop » tutorials » hello world</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">

jquery(function($){

// how easy is this??
$('#target').jcrop();

});

</script>
</head>

<body>
<div id="outer">
<div class="jcexample">
<div class="article">

<h1>jcrop - hello world</h1>
<img src="demo_files/pool.jpg" id="target" alt="flowers" />

<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>

<div id="dl_links">
<a href="http://deepliquid.com/content/jcrop.html">jcrop home</a> |
<a href="http://deepliquid.com/content/jcrop_manual.html">manual (docs)</a>
</div>

</div>
</div>
</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jcrop » tutorials » event handler</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">
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 id="outer">
<div class="jcexample">
<div class="article">
<h1>jcrop - event handlers</h1>
<!-- this is the image we're attaching jcrop to -->
<img src="demo_files/pool.jpg" id="target" alt="flowers" />
<!-- this is the form that our event handler fills -->
<form id="coords"
class="coords"
onsubmit="return false;"
action="http://example.com/post.php">
<div>
<label>x1 <input type="text" size="4" id="x1" name="x1" /></label>
<label>y1 <input type="text" size="4" id="y1" name="y1" /></label>
<label>x2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>y2 <input type="text" size="4" id="y2" name="y2" /></label>
<label>w <input type="text" size="4" id="w" name="w" /></label>
<label>h <input type="text" size="4" id="h" name="h" /></label>
</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>
<div id="dl_links">
<a href="http://deepliquid.com/content/jcrop.html">jcrop home</a> |
<a href="http://deepliquid.com/content/jcrop_manual.html">manual (docs)</a>
</div>
</div>
</div>
</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jcrop » tutorials » aspectratio w/ preview</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">
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 id="outer">
<div class="jcexample">
<div class="article">
<h1>jcrop - aspect ratio w/ preview pane</h1>
<table>
<tr>
<td>
<div style="width: 500px; height: 370px; overflow: hidden;">
<img src="demo_files/pool.jpg" id="target" alt="flowers" style="width: 500px; height: 370px;"/>
</div>
</td>
<td>
<div style="width: 100px; height: 100px; overflow: hidden;">
<img src="demo_files/pool.jpg" id="preview" alt="preview" class="jcrop-preview" />
</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>
<div id="dl_links">
<a href="http://deepliquid.com/content/jcrop.html">jcrop home</a> | <a href="http://deepliquid.com/content/jcrop_manual.html">manual (docs)</a>
</div>
</div>
</div>
</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jcrop » tutorials » animations / transitions</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.jcrop.js" type="text/javascript"></script>
<script src="../js/jquery.color.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jcrop.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.jcrop.extras.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">
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 id="outer">
<div class="jcexample">
<div class="article">
<h1>jcrop - animations/transitions</h1>
<img src="demo_files/sago.jpg" id="target" alt="flowers" />
<div id="interface" style="margin: 1em 0;"></div>
<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>
<p id="shadetxt" style="display:none; color:#900;">
<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>
<div id="dl_links">
<a href="http://deepliquid.com/content/jcrop.html">jcrop home</a> |
<a href="http://deepliquid.com/content/jcrop_manual.html">manual (docs)</a>
</div>
</div>
</div>
</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jcrop » tutorials » api demo</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<style type="text/css">
.optdual { position: relative; }
.optdual .offset { position: absolute; left: 18em; }
.optlist label { width: 16em; display: block; }
#dl_links { margin-top: .5em; }
</style>
<script type="text/javascript">
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 id="outer">
<div class="jcexample">
<div class="article">
<h1>jcrop - api demo</h1>
<img src="demo_files/sago.jpg" id="target" alt="jcrop image" />
<div style="margin: .8em 0 .5em;">
<span class="requiresjcrop">
<button id="setselect">setselect</button>
<button id="animateto">animateto</button>
<button id="release">release</button>
<button id="disable">disable</button>
</span>
<button id="enable" style="display:none;">re-enable</button>
<button id="unhook">destroy!</button>
<button id="rehook" style="display:none;">attach jcrop</button>
</div>
<fieldset class="optdual requiresjcrop">
<legend>option toggles</legend>
<div class="optlist offset">
<label><input type="checkbox" id="ar_lock" />aspect ratio</label>
<label><input type="checkbox" id="size_lock" />minsize/maxsize setting</label>
</div>
<div class="optlist">
<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>
<fieldset class="requiresjcrop" style="margin: .5em 0;">
<legend>change image</legend>
<span>
<button id="img2">pool</button>
<button id="img1">sago</button>
<button id="img3">sago w/ outerimage</button>
</span>
</fieldset>
<div id="dl_links">
<a href="http://deepliquid.com/content/jcrop.html">jcrop home</a> |
<a href="http://deepliquid.com/content/jcrop_manual.html">manual (docs)</a>
</div>
</div>
</div>
</div>
</body>
</html>