jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

一般网站上传头像部分会比较麻烦，如果完全程序控制的话，程序把上传的图片自动裁切成指定大小的头像的话，很有可能会破坏头像的整体美观。所以现在大多数web2.0网站都有用js或flash来实现头像的上传与选取！

现在用jquery加上jcrop插件的话，就可以非常简单的实现这些功能！如果再加上编写的一些ajax处理部分的话就基本上可以满足一般web2.0的使用要求了

PHP代码

<?php
if($_GET[‘act’]==‘saveThumb’){
$targ_w = $targ_h = 150;
$jpeg_quality = 100;
$src = $_POST[‘bigImage’];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST[‘x’],$_POST[‘y’],$targ_w,$targ_h,$_POST[‘w’],$_POST[‘h’]);
header(‘Content-type: image/jpeg’);
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}
?>
<html>
<head>
<script src="jquery.pack.js"></script>
<script src="jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
$(function(){
});
function goss(){
jQuery(‘#cropbox’).Jcrop({
onChange: showPreview,
onSelect: showPreview,
onSelect: updateCoords,
aspectRatio: 1
});
}
function updateCoords(c)
{
$(‘#x’).val(c.x);
$(‘#y’).val(c.y);
$(‘#w’).val(c.w);
$(‘#h’).val(c.h);
};
function checkCoords()
{
if ($(‘#x’).val()==”){
alert(‘请先上传头像然后选择裁切头像最后进行保存！’);
return false;
}
};
function showPreview(coords)
{
var rx = 150 / coords.w;
var ry = 150 / coords.h;
var w2=$("#bigwidth").val();
var h2=$("#bigheight").val();
jQuery(‘#preview’).css({
width: Math.round(rx * w2) + ‘px’,
height: Math.round(ry * h2) + ‘px’,
marginLeft: ‘-‘ + Math.round(rx * coords.x) + ‘px’,
marginTop: ‘-‘ + Math.round(ry * coords.y) + ‘px’
});
}
</script>
</head>
<body>
<?php
if($_GET[‘act’]==‘upload’){
if($_POST[‘upload’]==‘upload’){
$uploaddir =‘upload/’;
$uploadfile = $uploaddir . basename($_FILES[‘file’][‘name’]);
//print_r($_FILES[‘file’]);
//echo $uploadfile;
if (move_uploaded_file($_FILES[‘file’][‘tmp_name’], $uploadfile)) {
list($w, $h, $type, $attr)=getimagesize($uploadfile);
$str=”;
if($w>550){
$str="width:550px;";
}
if($h>550){
$str.=" height:550px;";
}
$str=emptyempty($str)?”:"style=’ ".$str." ‘";
$f1="<img src=’$uploadfile’ border=0 $str id=’cropbox’ >";
$f2="<img src=’$uploadfile’ border=0 $str id=’preview’ >";
echo ‘<script language="javascript">parent.$("#showBig").html("’.$f1.‘");parent.$("#showThumb").html("’.$f2.‘");parent.goss();parent.$("#bigwidth").val("’.$w.‘");parent.$("#bigheight").val("’.$h.‘");parent.$("#bigImage").val("’.$uploadfile.‘");</script>’;
}else {
echo "<script>alert(‘文件上传失败!’);</script>";
}
}
?>
<div style="margin:0px;font-size:12px;">
<FORM ACTION="?act=upload" METHOD=POST enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit" name="button" id="button" value="提交" />
<input name="upload" type="hidden" id="upload" value="upload" /><input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
</FORM>
</div>
<?php
exit;
}
?>
<div id="showBig" style="width:500px;height:500px;border:2px solid #E6E0CE;padding:3px;"></div>
<iframe style="width:500px;height:60px;padding:0px;" src="?act=upload"></iframe>
<div id="showThumb" style="width:152px;height:152px;border:1px solid #cccccc;padding:1px; overflow: hidden;"></div>
<div style="margin-top:20px;">
<form action="?act=saveThumb" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="bigImage" name="bigImage" />
<input type="hidden" id="bigwidth" name="bigwidth" />
<input type="hidden" id="bigheight" name="bigheight" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="保存用户头像" />
</form>
</div>
</body>
</html>

jcrop.zip

jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

现在用jquery加上jcrop插件的话，就可以非常简单的实现这些功能！如果再加上编写的一些ajax处理部分的话就基本上可以满足一般web2.0的使用要求了

PHP代码

<?php
if($_GET[‘act’]==‘saveThumb’){
$targ_w = $targ_h = 150;
$jpeg_quality = 100;
$src = $_POST[‘bigImage’];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST[‘x’],$_POST[‘y’],$targ_w,$targ_h,$_POST[‘w’],$_POST[‘h’]);
header(‘Content-type: image/jpeg’);
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}
?>
<html>
<head>
<script src="jquery.pack.js"></script>
<script src="jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
$(function(){
});
function goss(){
jQuery(‘#cropbox’).Jcrop({
onChange: showPreview,
onSelect: showPreview,
onSelect: updateCoords,
aspectRatio: 1
});
}
function updateCoords(c)
{
$(‘#x’).val(c.x);
$(‘#y’).val(c.y);
$(‘#w’).val(c.w);
$(‘#h’).val(c.h);
};
function checkCoords()
{
if ($(‘#x’).val()==”){
alert(‘请先上传头像然后选择裁切头像最后进行保存！’);
return false;
}
};
function showPreview(coords)
{
var rx = 150 / coords.w;
var ry = 150 / coords.h;
var w2=$("#bigwidth").val();
var h2=$("#bigheight").val();
jQuery(‘#preview’).css({
width: Math.round(rx * w2) + ‘px’,
height: Math.round(ry * h2) + ‘px’,
marginLeft: ‘-‘ + Math.round(rx * coords.x) + ‘px’,
marginTop: ‘-‘ + Math.round(ry * coords.y) + ‘px’
});
}
</script>
</head>
<body>
<?php
if($_GET[‘act’]==‘upload’){
if($_POST[‘upload’]==‘upload’){
$uploaddir =‘upload/’;
$uploadfile = $uploaddir . basename($_FILES[‘file’][‘name’]);
//print_r($_FILES[‘file’]);
//echo $uploadfile;
if (move_uploaded_file($_FILES[‘file’][‘tmp_name’], $uploadfile)) {
list($w, $h, $type, $attr)=getimagesize($uploadfile);
$str=”;
if($w>550){
$str="width:550px;";
}
if($h>550){
$str.=" height:550px;";
}
$str=emptyempty($str)?”:"style=’ ".$str." ‘";
$f1="<img src=’$uploadfile’ border=0 $str id=’cropbox’ >";
$f2="<img src=’$uploadfile’ border=0 $str id=’preview’ >";
echo ‘<script language="javascript">parent.$("#showBig").html("’.$f1.‘");parent.$("#showThumb").html("’.$f2.‘");parent.goss();parent.$("#bigwidth").val("’.$w.‘");parent.$("#bigheight").val("’.$h.‘");parent.$("#bigImage").val("’.$uploadfile.‘");</script>’;
}else {
echo "<script>alert(‘文件上传失败!’);</script>";
}
}
?>
<div style="margin:0px;font-size:12px;">
<FORM ACTION="?act=upload" METHOD=POST enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit" name="button" id="button" value="提交" />
<input name="upload" type="hidden" id="upload" value="upload" /><input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
</FORM>
</div>
<?php
exit;
}
?>
<div id="showBig" style="width:500px;height:500px;border:2px solid #E6E0CE;padding:3px;"></div>
<iframe style="width:500px;height:60px;padding:0px;" src="?act=upload"></iframe>
<div id="showThumb" style="width:152px;height:152px;border:1px solid #cccccc;padding:1px; overflow: hidden;"></div>
<div style="margin-top:20px;">
<form action="?act=saveThumb" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="bigImage" name="bigImage" />
<input type="hidden" id="bigwidth" name="bigwidth" />
<input type="hidden" id="bigheight" name="bigheight" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="保存用户头像" />
</form>
</div>
</body>
</html>

下载

jcrop.zip

11月21日刘宁生日快乐

去了萧山，风景不错，就是人烟少了点！

在windows下启用php的mail()函数进行发信

其实要想在windows下使用php的mail()函数进行发信的话，只要机器里安装了smtp就可以了

当然iis有内置的smtp，可是如果web服务器安装的是apache的话总不可能为了一个smtp而再去安装一个iis吧

所以找了个简单的smtp服务器软件（1st SMTP Server）找的是一个老版本的，才700多k，没有其它的无用功能！

先下载好1st SMTP Server后，运行里面的注册机，再运行主程序，进行注册。注册完了后就可以关闭主程序窗口了，在任务栏里双击1st SMTP Server图标，可以看到它的主界面！这时，应该smtp服务就正常运行了，像dns和smtp端口之类的默认就好了。

第二步。设置php.ini

找到

[mail function]
SMTP = localhost
smtp_port = 25
sendmail_from = web@phpd.cn

如果加了;的话，去掉就可以了,apache重启一下，这样php的mail()就可以正常工作了

1st SMTP Server 下载

fstsmtp.rar

今天花了一天时间整了个简单的框架

写时好像老是受thinkphp及fleaphp的影响，所以写了个不伦不类

而且好像效率上也不太行，光框架就占内存221k，执行速度也在0.02秒左右如果加上smarty的话，内存立即增到500多k执行时间0.03秒左右！

以后把它再优化一下，写这个框架的初衷就是为了快速，低消耗！写下来后才发现要改正的地方还不少！

目前框架还是个半成品，只是实现了控制器部分，视图用的是smarty 然后数据模型部分现在还没有完善，缓存处理方面还没写！

自动从标题中提取关键词及ajax输入提示

公司网站正在新做的一个功能

考虑到最近blog里没写什么新的东西就把这段代码贴一下

test.html

XML/HTML代码

<html>
<head>
<title>自动从标题中提取关键词及ajax输入提示</title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding:20px;">
<form id="form1" name="form1" method="post" action="javascript:;">
标题：<input type="text" name="title" id="title" />
<label>
<input type="submit" name="button" id="button" value="提交" onclick="sendTitle()"/>
</label>
<input name="add" type="hidden" id="add" value="add" />
</form>
<br>
企业：<input type="text" name="key" id="key" onkeyup="showKey()"/>
<input type="hidden" name="keys" id="keys" value="">
<style>
#showBox{overflow:auto;width:250px;border:1px solid #eee;height:100px;margin-top:10px;}
div{padding:3px;}
</style>
<div id="showBox"></div>
<script type="text/javascript">
function sendTitle(){
if($("#title").val()==”){
alert("标题不能为空");
}else{
$.post("?index/test/sendtitle",{title:$("#title").val()},function(data){
var html="";
for(var i = 0; i < data.length; i++){
html+="<div>"+data[i].companyid+" | "+data[i].c_name+"</div>"
}
$("#showBox").html(html);
$("#key").val($("#title").val());
$("#keys").val($("#title").val());
},"json");
}
}
function showKey(){
var key=$("#key").val();
var keys=$("#keys").val();
if(key!=keys){
$.post("?index/test/sendtitle",{title:key},function(data){
var html="";
for(var i = 0; i < data.length; i++){
var ii2=i+1;
html+="<div>"+i2+" | "+data[i].c_name+"</div>"
}
$("#showBox").html(html);
$("#keys").val(key);
},"json");
}
}
</script>
</body>
</html>

php处理部分：

PHP代码

<?php
class box
{
public function __construct($db)
{
$this->db=$db;
}
//读出全部的企业关键词，用于处理标题，提取标题中对应有关的企业列表
public function readCompanyKey($cachetime=3600*24) //关键词库的缓存时间默认为一天
{
global $ROOT_PATH;
$file=$ROOT_PATH.‘/temp/CompanyKey.inc’;
if(!file_exists($file)){
$this->writeCompanyKey();
}else{
if(time()-filemtime($file)>$cachetime){
$this->writeCompanyKey();
}
}
$row=unserialize(file_get_contents($file));
return $row;
}
//缓存全部的企业关键词库
public function writeCompanyKey()
{
global $ROOT_PATH;
$file=$ROOT_PATH.‘/temp/CompanyKey.inc’;
$rs=$this->db->query("select * from `companykey`");
$row = $rs->fetchall(PDO::FETCH_ASSOC);
$content=serialize($row);
$fs=fopen($file,‘w’);
if(fwrite($fs, $content) === FALSE) {
echo "不能写入到文件!请注意temp文件夹的读写权限";
exit;
}else{
return true;
}
fclose($fs);
}
//从标题中通过关键词库获取相关的企业列表
public function getComapnyList($title)
{
$title=strtolower($title);
$key=$this->readCompanyKey();
//if(count($key)<=0){echo ‘出错，关键词不存在！’;exit;}
foreach($key as $v){
if(strpos($title,$v[‘key’])!==false){
$companyid[]=$v[‘companyid’];
//echo ‘1’;
}
}
//print_r($companyid);
if(count($companyid)>0){
$companyidArr=$this->listOrder($companyid); //对获取的企业按权重进行排序，去除重复的企业
foreach($companyidArr as $v){
$rs=$this->db->query("select `companyid`,`c_name` from `company` where `companyid`=’".$v."’ limit 1");
$row = $rs->fetchall(PDO::FETCH_ASSOC);
$list[]=$row[0];
}
return $list;
}else{
return false;
}
}
//排序算法，按标题中同一个关键词的出现个数对其所对应的企业进行排序，并去除重复企业
public function listOrder($arr){
if(!is_array($arr)){
return ”;
}
$count=count($arr);
$arr2=array_unique($arr);
foreach($arr2 as $k=>$v){
$i=0;
$i2=0;
for($l=$i2;$l<$count;$l++){
if($v==$arr[$l]){
$i++;
$s[$k]=$i;
//$s[$k][‘key’]=$i;
//$s[$k][‘var’]=$v;
}
$i2++;
}
}
arsort($s);
foreach($s as $k=>$v){
$row[]=$arr[$k];
}
return $row;
}
}
$box=new box($db1);
if($uri[2]==‘sendtitle’){
$title=$_POST[‘title’];
$list=$box->getComapnyList($title);
echo json_encode($list);
exit;
}
$smarty->display("index/test.html");
exit();
?>

效果

庆祝公司服务器无故障运行88天

现在时间2008年11月16日12：30

服务器安全无故障运行88天又15小时

最喜欢88这个数字了，所以特别庆祝一下（下次到150的时候再庆祝一下）

看看你的QQ号是哪天申请的，多长qq龄了

查看网址

http://user.10.qq.com/

我也看看我三个qq的时间：

7279915

50130089

1903710

还一个我妹的，号是 380715XX

(8位的，03年申请到的，貌似运气非常好，当时用qq申请精灵申请的！一般来说01年末申请的号就是9位的了)

vi中最最常用的一些命令

命令全部在命令模式下输入（就是记得输命令时按下ESC键）

保存文件 :w (注意，前面有:)

强制保存文件 :w!

退出文件但不保存 :q

强制奶出文件但不保存 :q!

保存并退出 :wq （同理，如果是强制的话，加!）

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

在光标所在行插入新行 o (注意，不是零，是字母o)

在光标前面插入字符 i

在光标后面输入字符 a

删除一行 dd

删除光标所在的字符 x

转到具体的一行 10gg 或是 :10 (10为行号)

转个首行 gg

转个尾行 shift+g

清空全部内容 :%d

清空光标所在行及下面全部行的内容 dG (注意大小写)

撤销上一步操作 u

重做上一步操作 ctrl+r

搜索查找字符 ?str 或 /str (str表示要查找的字符)

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

这些是最基本的了，还有像替换之类的比较复杂的就找找vi的全部命令看看

Ubuntu vim 高亮

1、安装vim

sudo apt-get install vim-full

2、配置文件的位置

在目录 /etc/vim 下面，有个名为vimrc的文件，这是系统中公共的vim配置文件，对所有用户都有效。

3、设置语法高亮显示

1) 打开vimrc，添加以下语句来使得语法高亮显示：

syntax on

2) 如果此时语法还是没有高亮显示，那么在/etc目录下的profile文件中添加以下语句：

export TERM=xterm-color

4、设置Windows风格的C/C++自动缩进（添加以下set语句到vimrc中）

1）设置（软）制表符宽度为4：

set tabstop=4

set softtabstop=4

2）设置缩进的空格数为4

set shiftwidth=4

3）设置自动缩进：即每行的缩进值与上一行相等；使用 noautoindent 取消设置：

set autoindent

4）设置使用 C/C++ 语言的自动缩进方式：

set cindent

5）设置C/C++语言的具体缩进方式：

set cinoptions={0,1s,t0,n-2,p2s,(03s,=.5s,>1s,=1s,:1s

6）如果想在左侧显示文本的行号，可以用以下语句：

set nu

7）最后，如果没有下列语句，就加上吧：

if &term=="xterm"

set t_Co=8

set t_Sb=^[[4%dm

set t_Sf=^[[3%dm
endif

一下由网友kongove提供：

colorscheme elflord
"colorscheme darkblue
"colorscheme evening
"colorscheme murphy
"colorscheme torte
"colorscheme desert
这些事提供的一些配色方案，自选一种就很漂亮了~

℃冻番茄's Blog

记录平时工作、学习…

jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

11月21日刘宁生日快乐

在windows下启用php的mail()函数进行发信

今天花了一天时间整了个简单的框架

自动从标题中提取关键词及ajax输入提示

庆祝公司服务器无故障运行88天

看看你的QQ号是哪天申请的，多长qq龄了

vi中最最常用的一些命令

Ubuntu vim 高亮

2025 年 9 月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30