jquery php截图 1.0

lrenwang , 2011/11/23 10:36 , Javascript , 评论(4) , 阅读(778) , Via 本站原创

其实这个功能不是很复杂,网上也有不少例子, 感觉写的太麻烦了. 我就自己写了个简单的例子,虽然功能不是很完善,但是基础功能都有了,扩展很方便的
主要是分成几个部分
如果转载,请标明http://blog.lrenwang.com/crop_v1/,谢谢

下载文件

点击这里下载文件

那些坐标是为了方便理解,实际使用的时候设置成隐藏(hidden)

div_ctrl.js 控制选择区域的缩放

div_move.js 控制选择区域的拖拽

/**
*  div拖拽
*
*
*/
(function($) {
  $.fn.div_move = function(options) {
    var defaults = {
    };
    var options = $.extend(defaults, options);
    //是否点击状态
    var m_click = false;
    var m_x,m_y;

    var obj = $(this);
    obj.bind("mouseout",
    function() {
      m_click = false;
    }).bind("mouseup",
    function() {
      m_click = false;
    }).bind("mousedown",
    function(e) {
      m_x = e.clientX ;
      m_y = e.clientY ;
      m_click = true;
    }).bind("mousemove",
    function(e) {
      if(!m_click) return ;
      var x = parseInt(e.clientX) ;
      var y = parseInt(e.clientY) ;
      var div_left = parseInt($(this).css("left").replace(/px/, ""));
      var div_top = parseInt($(this).css("top").replace(/px/, ""));
      var offset_x = div_left+(x - parseInt(m_x));
      var offset_y = div_top+(y - parseInt(m_y));
      obj.css({left:offset_x+"px",top:offset_y+"px"})

      m_x = x;
      m_y = y;

      $("#"+options.x).val(offset_x);
      $("#"+options.y).val(offset_y);
    }).bind("click",
    function() {
    });

  };
})(jQuery);

index.php
主要是控制3种操作,其实应该分成2个文件的,懒得搞那么细致
1 预览
2 下载, 和预览只有一点小差别
3 控制页面

<?php

/**
* 截图
*
* @param string $source  原图的饿url地址
* @param int $src_x    从原图的x坐标点开始
* @param int $src_y    从原图的y坐标开始
* @param int $dst_w    新图的宽度
* @param int $dst_h    新图的高度
* @param int $src_w    从原图截取的宽度
* @param int $src_h    从原图截取的高度
* @return  resource $thumb  返回新图资源
*/
function crop($src ,$src_x ,$src_y ,$dst_w ,$dst_h,$src_w,$src_h)
{
  $thumb = imagecreatetruecolor($dst_w, $dst_h);
  /**
   * 读取大图的资源
   *   请注意,这里其实应该判断文件是什么类型, getimagesize()
   *
   */
  $source_rs = imagecreatefromjpeg($src);

  imagecopyresized($thumb, $source_rs, 0, 0, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);
  return $thumb;
}
/**
* 预览
*/
if ($_GET['type']=='preview')
{
  $thumb = crop($_GET['src'],$_GET['src_x'],$_GET['src_y'],$_GET['dst_w'],$_GET['dst_h'],$_GET['src_w'],$_GET['src_h']);
  header('Content-Type: image/jpeg');
  imagejpeg($thumb);
  exit;
}
/**
* 生成
*/
if ($_GET['type']=='make')
{
  $thumb = crop($_GET['src'],$_GET['src_x'],$_GET['src_y'],$_GET['dst_w'],$_GET['dst_h'],$_GET['src_w'],$_GET['src_h']);
  $tmp = explode('.',$_GET['src']);
  $src_new = $tmp[0].'_thumb.'.$tmp[1];
  imagejpeg($thumb,$src_new,90);


  Header("Content-type: {$type} ; charset=utf-8");               //输出类型
  Header("Content-Disposition:filename={$src_new}");
  Header("Accept-Ranges: bytes");                       //文件单位
  Header("Content-Disposition: attachment; filename={$src_new}");        //下载时显示的名字
  $file = fopen($src_new,"r");         // 打开文件
  echo fread($file,filesize($src_new));
  fclose($file);
  exit;
  exit;
}

//源文件
$src = '1.jpg';
//获得原图的宽高
list($src_w, $src_h) = getimagesize($src);

//小图的宽度
$dst_w  = '100';
//小图的高度
$dst_h = '100';
?>
<!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" />
  <meta name="generator" content="WebMotionUK" />
  <title>crop</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="div_ctrl.js"></script>
  <script type="text/javascript" src="div_move.js"></script>

<style>
#crop{
  position: absolute;
  left:100px;
  top:0px;
}
#crop1{
  position: absolute;
  left:800px;
  top:0px;
  width:650px;
  height:800px;
}
#crop img {
  position: absolute;
  left:0px;
  top:0px;
  z-index:1;
}
#check_box
{
  position: absolute;
  left:0px;
  top:0px;
  width:100px;
  height:100px;
  z-index:100;
  border:#369 solid 1px;
  cursor:pointer;
}
</style>
</head>
<body>

<div id="crop">
<img src="<?=$src?>" >
<div id="check_box"></div>
</div>

<div id="crop1">
大图起始点x:<input type="text" id="src_x" name="src_x" value="0">
大图起始点y:<input type="text" id="src_y" name="src_y" value="0"><br />
大图截取宽度:<input type="text" id="src_w" name="src_w" value="<?=$dst_w?>">
大图截取高度:<input type="text" id="src_h" name="src_h" value="<?=$dst_h?>"><br />
<input type="button" value="预览" onclick="preview()" />
<input type="button" value="生成" onclick="image_make()" />
<input type="button" value="+" id="btm_up">
<input type="button" value="-" id="btm_down">
<p>

<div id="new_img"></div>
<div id="img_src"></div>
</p>
</div>
<script>
var src = '<?=$src?>';
var dst_w = '<?=$dst_w?>';
var dst_h = '<?=$dst_h?>';

$(document).ready(function(){
  //初始化
  $("#crop").css({width:"<?=$src_w?>px",height:"<?=$src_h?>px"})
  $("#check_box").css({width:"<?=$dst_w?>px",height:"<?=$dst_h?>px"})

  $('#check_box').div_move({x:'src_x',y:'src_y'});
  $("#btm_up").div_ctrl({id:"check_box",s:2,w:"src_w",h:"src_h"});
  $("#btm_down").div_ctrl({id:"check_box",s:-2,w:"src_w",h:"src_h"});

});

function preview()
{
  var src_x = $("#src_x").val();
  var src_y = $("#src_y").val();
  var src_w = $("#src_w").val();
  var src_h = $("#src_h").val();
  var img_src = "?type=preview&src="+src+"&src_x="+src_x+"&src_y="+src_y+"&dst_w="+dst_w+"&dst_h="+dst_h+"&src_w="+src_w+"&src_h="+src_h;
  $("#new_img").html("<img src='"+img_src+"' />")
}
function image_make()
{
  var src_x = $("#src_x").val();
  var src_y = $("#src_y").val();
  var src_w = $("#src_w").val();
  var src_h = $("#src_h").val();
  var img_src = "?type=make&src="+src+"&src_x="+src_x+"&src_y="+src_y+"&dst_w="+dst_w+"&dst_h="+dst_h+"&src_w="+src_w+"&src_h="+src_h;
  $("#img_src").html("<a href='"+img_src+"' target=_blank>下载</a>")

}
</script>