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

2024-10-17 04:55:37

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

Jcrop演示

项目结构：

效果图：

这个很有用：

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

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

代码部分：

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

准备工作：

下载：Jcrop-0.9.10 (zip format)

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

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

代码如下:

jQuery(function($){

// How easy is this??
$('#target').Jcrop();

});

</script>
</head>

<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

代码如下:

/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

代码如下:

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

Asp.Net获取网站截图的实例代码

复制代码代码如下: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;namespace WindowsFormsApplication1{ public partial class Form1 : Form {
jQuery jcrop插件截图使用方法

在后台来进行图片切割.头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像.即X = X*原图宽/前图宽,Y = Y*原图高/前图高,W = W*原图宽/前图宽,H = H*原图高/前图高.实例:JSP: 复制代码代码如下: <div id="cutImage" style="display: none;"> <div clas
asp.net截屏功能实现截取web页面

本文实例展示了asp.net截屏功能实现截取web页面的方法,代码简洁易懂,分享给大家供大家参考. 具体实现代码如下: using System.Drawing; //打开该页面 System.Diagnostics.Process.Start("IEXPLORE.EXE", "http://localhost:56/Spacxxe.html"); System.Threading.Thread.Sleep(3000); //截屏 //创建并设置画布大小 Syste
js插件Jcrop自定义截取图片功能

当初说这个需求的时候,在网上找了一点资料,但是基本上感觉不符合项目中的需求.参照一些项目,和同事的改造,终于是像点样子了. 截图大致截为3个像素,每个像素使用的地方也不同,考虑图片不会是很多,分别压缩保存下来. 根据截取的像素位置,对应的压缩成相应的图片: 首先需要下载Jcrop.js与uploadify.js 上传图片的插件和截图的插件 Comm_UploadJcrop.js //剪裁头像对象和宽高比例 var jcrop_api, boundx, boundy; //上传图片 //Id:上传
jcrop 网页截图工具(插件)开发

今天给大家介绍一下一个web 中经常会用到的截图(如:头像等)工具: Jcrop演示项目结构: 效果图: 这个很有用: 看到这些,大家也想自己试试吧 =========================================== 代码部分: =========================================== 准备工作: 下载:Jcrop-0.9.10 (zip format) 解压后放入到你的项目里面,就如上面的项目结构一样... /Jcrop/WebContent
命令行下的2款网页截图工具推荐

现在很多浏览器或浏览器工具栏.插件都提供网页截图的功能,不过大多数都需要鼠标或键盘手工操作,而不能通过命令行自动化完成.有时我们可能需要每天定时对某些网页截图,或者批量地对多个URL截图,这时这些的需要手工操作的截图工具或插件就有一点不够用了.不过幸运的是,有一些免费的可以通过命令行方式操作的网页截屏软件或浏览器插件可以帮我们解决这个问题,下面介绍两款我经常使用的. 第一款是IECapt,官方主页在 http://iecapt.sourceforge.net/ ,这是一个免费开源的软件,有C++
vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件

当前最新版本:vue-devtools 6.0.0-beta.7 用这个版本主要是为了支持vue3 推荐直接下载 https://www.crx4chrome.com/crx/107268/ 本地下载地址自行构建 https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.6 安装安装依赖(这里用npm比较快,记得用淘宝源) npm install --global windows-build-tools 等等等.......
Python中使用 Selenium 实现网页截图实例

Selenium 是一个可以让浏览器自动化地执行一系列任务的工具,常用于自动化测试.不过,也可以用来给网页截图.目前,它支持 Java.C#.Ruby 以及 Python 四种客户端语言.如果你使用 Python,则只需要在命令行里输入"sudo easy_install selenium"并回车,即可安装 selenium 的 Python 版本的客户端支持. 以 Python 为例,我们可以使用下面的脚本来给指定页面(比如我们首页)截图: # -*- coding: utf-8 -
php使用CutyCapt实现网页截图保存的方法

本文实例讲述了php使用CutyCapt实现网页截图保存的方法.分享给大家供大家参考,具体如下: 网页截图这个功能大家可能用到最多的就是QQ截图,或利用asp.net来实现截图,其实我们也可以直接使用php来网页截图,这里就来给大家介绍php利用CutyCapt实现网页截图的流程: CutyCapt下载地址:http://sourceforge.net/projects/cutycapt/files/cutycapt/ windows CutyCapt不需要安装,直接保存到你的电脑中即可,然后p
vue 实现网页截图功能详解

最近项目有一个需求,需要上传图片,但是客户上传的图片大小不一,所以我们需要规定客户的图片比例,但又需要是客户所需的,所以就想到了截图实现效果我们的架构是vue,所以用的是一个vue的截图插件安装插件:npm install vue-cropper --save-dev 引入组件 import Vue from 'vue'; import { VueCropper } from "vue-cropper"; Vue.use(VueCropper) 核心代码 <div>
C#实现网页截图功能

网页截图是很常见的实用功能,今天就为大家共享一个实现浏览器截图的代码,主要程序代码如下所示: private void Form_Load(object sender, EventArgs e) { //接收web url string colle = string.Empty; string url = string.Empty; //获取进程调用传入的命令 string[] args = Environment.GetCommandLineArgs(); string[] args = ne
php通过执行CutyCapt命令实现网页截图的方法

本文实例讲述了php通过执行CutyCapt命令实现网页截图的方法.分享给大家供大家参考,具体如下: 用php使用exec执行命令 PS.默认情况下exec函数是禁用的,打开php.ini检查disable_function是否包含这个还是,有就去除复制代码代码如下: exec('xvfb-run --server-args="-screen 0, 1024x768x24" CutyCapt --url=http://www.jb51.net --out=2.jpg'); 这个里一
C#实现的滚动网页截图功能示例

本文实例讲述了C#实现的滚动网页截图功能.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace WindowsFormsApplic
C#实现属于自己的QQ截图工具

下面就具体介绍下实现截图工具的实现思路. 为了让大家更清楚地知道如何去实现自己的截图工具,首先我来描述下截图的一个过程--我们使用QQ的截图工具和Windows 自带的截图工具都可以发现,当我们点击QQ窗体中的截图按钮时,此时我们将看到一个全屏图片,然后我们可以在其上截图,当鼠标左键按下时,即代表开始截图,并我们可以移动鼠标来改变截图的大小,鼠标弹起时即代表结束截图,此时我们可以双击矩形区域完全截图,并且可以通过粘贴操作把截取的图片粘贴到聊天窗口的发送区,鼠标右键点击则是退出截图.这样我们截图的

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

相关推荐

随机推荐