jcrop 网页截图工具(插件)开发
程序员文章站
2024-02-02 18:45:04
今天给大家介绍一下一个web 中经常会用到的截图(如：头像等)工具：
jcrop演示
项目结构：
效果图：
这个很有用：
看到这些...
今天给大家介绍一下一个web 中经常会用到的截图(如：头像等)工具：
项目结构：
效果图：
这个很有用：
看到这些，大家也想自己试试吧
===========================================
代码部分：
===========================================
准备工作：
解压后放入到你的项目里面，就如上面的项目结构一样...
/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>
推荐阅读