基于imgAreaSelect的用户图像截取
前言：想到用户资料中一般有个图像自我截取的部分，为什么要截取呢，因为好看了。so，经过我各种百度，各种参考，终于打工搞成了，写下纪念纪念，让以后拿来就用也好。
一：想前端ui这东西，我就懒得说话了，哎，没艺术啊！毫不犹豫的选择上网找资料了，发现一般有两种方法1：Jcrop；2：imgAreaSelect；呵呵，我选了imgAreaSelect;使用很简单么？
二：获取这个插件包：点我就来了开心吧！
三：使用方法简介：
$('#img').imgAreaSelect({
各种参数配置，回调函数
});
$('img#select').imgAreaSelect({
selectionColor:'blue', //截取颜色
//看名字就知道了，截取部分的左上右下的点坐标哦
x1:0,y1:0,x2:50,y2:50,
maxWidth:400,maxHeitht:400, //限定的截取部分宽高：
minWidth:50,minHeight:50,
selectionOpacity:0.1, //截取的透明度
handles: true, //截取边框的小柄
aspectRatio:'1:1', //固定比例大小
onSelectEnd:preview //截取操作完后，需要获取什么的函数，自定义
});
-------------------------------------------------------------------------
四：附加解释说明，经过上方各种链接可能聪明的你已经有点不懂了
（截取的原理）：
1：给定你想选择显示截取后的大小：比如200
2：实际你截取的大小：select_width:
3: 显示比例：scale = 200 / (selection.width || 1);
4: 如何显示呢？把原图按此比例扩大，然后在控制边距以 -x,-y，偏移
回调函数部分：
var scaleX = 200 / (selection.width || 1);
var scaleY = 200 / (selection.height || 1); var scaleX1 = 100 / (selection.width || 1);
var scaleY1 = 100 / (selection.height || 1); $('#preview200').css({
width: Math.round(scaleX * 300) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX*selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY*selection.y1) + 'px' });
五：好了，激动人心的时候来了，请看图：
参考代码：不含服务端对图像的截取
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像选取</title> <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="../_uploadfilecheck.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('img#select').imgAreaSelect({
selectionColor:'blue',
x1:0,y1:0,x2:50,y2:50,
maxWidth:400,maxHeitht:400,
minWidth:50,minHeight:50,
selectionOpacity:0.1,
handles: true,
aspectRatio:'1:1',
onSelectEnd:preview });
$("#button1").click(function(){
if(checkImgType($("#imgFile")[0])){
$(this).parent().submit(); }
}); $("#button2").click(function(){
alert($(this).parent().submit());
});
})
function getValue(selection){
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="width"]').val(selection.width);
$('input[name="height"]').val(selection.height);
}
function preview(img, selection) {
if(selection.width>49){
getValue(selection);
var scaleX = 200 / (selection.width || 1);
var scaleY = 200 / (selection.height || 1); var scaleX1 = 100 / (selection.width || 1);
var scaleY1 = 100 / (selection.height || 1); $('#preview200').css({
width: Math.round(scaleX * 300) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' });
$('#preview100').css({
width: Math.round(scaleX1 * 300) + 'px',
height: Math.round(scaleY1 * 300) + 'px',
marginLeft: '-' + Math.round(scaleX1* selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY1 * selection.y1) + 'px' }); }
} </script> <style type="text/css">
#container{
// position:absolute;
// left:40px;
// background:#FFF; border:#666 2px solid;
border-radius:10px;
width:600px;
height:500px;
padding:20px;
}
#selectdiv{
width:350px;
height:550px;
float:left;
// border-right:#666 2px solid;
// border:#666 2px solid;
}
#uploaddiv{
margin-top:20px;
border-top:#CCC 1px solid;
}
#prediv200{
height:200px;
width:200px;
overflow:hidden;
border:#CCC 3px dashed;
}
#prediv100{
height:100px;
width:100px;
overflow:hidden;
border:#CCC 3px dashed;
}
#preview{
position:relative;
overflow:hidden;
}
[type=button]{
width:50px;
}
</style>
</head> <body> <div id="container"> <div id="selectdiv">
<img id="select" src="26.jpg" width="300px" height="300px" /> <div>
<p>图片上传:<font color='red'>*.gif,*.jpg,*.png,*.bmp</font></p> <form>
<input type="file" name="imgFile" id="imgFile"><br /><br />
<input type="button" value="上传" id="button1"/>
</form>
</div>
</div> <div id="prediv200">
<img id="preview200" src="26.jpg" width="200px" height="200px" />
</div> <div id="prediv100">
<img id="preview100" src="26.jpg" width="100px" height="100px" />
</div> <div>
<form>
<input type="hidden" name="x1" value="0" />
<input type="hidden" name="y1" value="0" />
<input type="hidden" name="width" value="100" />
<input type="hidden" name="height" value="100" />
<br /><br />
<input type="button" value="修改" id="button2"/>
</form>
</div>
</div> </body>
</html>
文件上传验证js:
/**检查图片上传类型*/
function checkImgType(obj){ var imgFile = '';
//获取图片的全路径
var imgFilePath = getImgFullPath(obj);
var endIndex = imgFilePath.lastIndexOf("\\");
var lastIndex = imgFilePath.length-endIndex-1;
if (endIndex != -1)
imgFile= imgFilePath.substr(endIndex+1,lastIndex);
else
imgFile = imgFilePath; var tag = true;
endIndex = imgFilePath.lastIndexOf(".");
if (endIndex == -1)
tag = false; var ImgName = imgFilePath.substr(endIndex+1,lastIndex);
ImgName = ImgName.toUpperCase(); if (ImgName !="GIF" && ImgName !="JPG" && ImgName !="PNG" && ImgName !="BMP"){
tag=false;
}
if (!tag) {
alert("上传图片的文件类型必须为: *.gif,*.jpg,*.png,*.bmp,请重新选择!")
alert("你逗我么");
// Upload.clear(obj);
return false;
}
return true;
} function getImgFullPath(obj) {
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
2014-07-19 13:59:55
基于imgAreaSelect的用户图像截取的更多相关文章
- 基于AXI VDMA的图像采集系统
基于AXI VDMA的图像采集系统 转载 2017年04月18日 17:26:43 标签: framebuffer / AXIS / AXI VDMA 2494 本课程将对Xilinx提供的一款IP核 ...
- 基于SURF特征的图像与视频拼接技术的研究和实现（一）
基于SURF特征的图像与视频拼接技术的研究和实现(一) 一直有计划研究实时图像拼接,但是直到最近拜读西电2013年张亚娟的<基于SURF特征的图像与视频拼接技术的研究和实现>,条 ...
- 基于jwt的用户登录认证
最近在app的开发过程中,做了一个基于token的用户登录认证,使用vue+node+mongoDB进行的开发,前来总结一下. token认证流程: 1:用户输入用户名和密码,进行登录操作,发送登录信 ...
- 基于RC4加密算法的图像加密
基于RC4加密算法的图像加密 某课程的一个大作业内容,对图像加密.项目地址:https://gitee.com/jerry323/RC4_picture 这里使用的是RC4(流.对称)加密算法,算法流 ...
- Laravel 5 中使用 JWT（Json Web Token） 实现基于API的用户认证
在JavaScript前端技术大行其道的今天,我们通常只需在后台构建API提供给前端调用,并且后端仅仅设计为给前端移动App调用.用户认证是Web应用的重要组成部分,基于API的用户认证有两个最佳解决 ...
- 基于jQuery点击图像居中放大插件Zoom
分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
- 深度学习与计算机视觉(12)_tensorflow实现基于深度学习的图像补全
深度学习与计算机视觉(12)_tensorflow实现基于深度学习的图像补全 原文地址:Image Completion with Deep Learning in TensorFlow by Bra ...
- 项目一:第十一天 2、运单waybill快速录入 3、权限demo演示-了解 5、权限模块数据模型 6、基于shiro实现用户认证-登录（重点）
1. easyui DataGrid行编辑功能 2. 运单waybill快速录入 3. 权限demo演示-了解 4. Apache shiro安全框架概述 5. 权限模块数据模型 6. 基于shiro ...
- 基于稀疏表示的图像超分辨率《Image Super-Resolution Via Sparse Representation》
由于最近正在做图像超分辨重建方面的研究,有幸看到了杨建超老师和马毅老师等大牛于2010年发表的一篇关于图像超分辨率的经典论文<ImageSuper-Resolution Via Sparse R ...
随机推荐
- MongoDB的使用[转]
http://www.cnblogs.com/TankMa/archive/2011/06/08/2074947.html
- JS和jquery加载的区别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- AC日记——计算循环节长度 51nod 1035
最长的循环节 思路: 我们尝试一种最简单的方法,模拟: 如何模拟呢? 每个数,对它模k取余,如果它的余数没有出现过,就补0继续模: 所以,当一个余数出现两次时,当前的长度即为循环节长度: 来,上代码: ...
- Java NIO中的FileLock（文件锁）
FileLock,文件锁. 文件锁在OS中很常见,如果多个程序同时访问.修改同一个文件,很容易因为文件数据不同步而出现问题.给文件加一个锁,同一时间,只能有一个程序修改此文件,或者程序都只能读此文件, ...
- Concurrency(Locking, Blocking and Row Versioning)
https://www.simple-talk.com/sql/t-sql-programming/row-versioning-concurrency-in-sql-server/?utm_sour ...
- iOS 汉字转拼音 PinYin4Objc
PinYin4Objc 是一个效率很高的汉字转拼音类库,支持简体和繁体中文.有以下特性:1.效率高,使用数据缓存,第一次初始化以后,拼音数据存入文件缓存和内存缓存,后面转换效率大大提高:2.支持自定义 ...
- UIView之userInteractionEnabled属性介绍-特殊子类覆盖多见于UIImageView和UILabel
属性作用 该属性值为布尔类型,如属性本身的名称所释,该属性决定UIView是否接受并响应用户的交互. 当值设置为NO后,UIView会忽略那些原本应该发生在其自身的诸如touch和keyboard等用 ...
- 鼠标悬浮弹出标题制作JQuery
今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出. 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class= ...
- 工厂方法模式之C++实现
说明:本文仅供学习交流,转载请标明出处.欢迎转载. 工厂方法模式与简单工厂模式的差别在于:在简单工厂模式中.全部的产品都是有一个工厂创造,这样使得工厂承担了太大的造产品的压力,工厂内部必须考虑所以的产 ...
- 解决：cannot execute binary file
linux系统下遇到cannot execute binary file的问题,一般由以下情况造成: 非root用户或者无执行权限 编译环境不同(程序由其他操作环境复制过来) 对于第一种情况,采用增加 ...