thinkphp jquery剪切图片 Jcrop

最新推荐文章于 2021-03-11 09:39:09 发布
最新推荐文章于 2021-03-11 09:39:09 发布
阅读量4.5k 收藏
点赞数
文章标签： jquery image function user stylesheet string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/php_jiang/article/details/8095264
版权

运用的是jquery中的插件，温馨提示请下载好js。如有不懂之处请参照上片帖子 上传照片 或者留言

<!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="__TEST__/css/login.css">
</head>

<script language="javascript" src="__TEST__/js/jquery-1.7.1.js"></script>  

<link rel="stylesheet" href="__TEST__/css/jquery.Jcrop.css">
<script src="__TEST__/js/jquery.Jcrop.js"></script>

<script>

 function tail_photo(){
 var jcrop_api, boundx, boundy;
         $j('#tailor').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
        onChange: updatePreview,
        onSelect: updatePreview,
onSelect: updateCoords,
        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 updateCoords(c)
{
var old_width = $j('#old_width0').val();
var rx =  old_width /410;
       // alert(old_width+"asd");
            width= Math.round(rx * c.w) + 'px';
            height= Math.round(rx * c.h) + 'px';
            marginLeft=  Math.round(rx * c.x) + 'px';
            marginTop= Math.round(rx * c.y) + 'px';
$j('#x').attr("value",marginLeft); //距离左侧的距离
$j('#y').attr("value",marginTop);//距离上边的距离
$j('#w').attr("value",width);//宽度
$j('#h').attr("value",height);//高度
};


      function updatePreview(c){
        if (parseInt(c.w) > 0)
        {
          var rx = 48 / c.w;
          var ry = 48 / c.h;


          $j('#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'
          });
        }
   {
          var rx = 165 / c.w;
          var ry = 165 / c.h;
          $j('#preview2').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'
          });
        }
      };
}
});
 
 var have_photo="{$num['have_photo']}";
  var photo="{$num['photo']}"
 
$j('#img_up').attr('src',photo);  
 
  function sub_upload1(){
ima_hidd=$j('#ima_hidden').val();
x=$j('#x').val();
y=$j('#y').val();
w=$j('#w').val();
h=$j('#h').val();
$j.post('../../Home/up_photo',{ima_hidden:ima_hidd,x:x,y:y,w:w,h:h},function (data){

if(have_photo==0){
$j('#img_up').attr('src','/'.data);
$j('#up_photo').removeClass();
 }
$j('#ima').css('display','none');
$j('#aa0').css('display','');
$j("#title_photo0").val(data);
//$j( "#uploader" ).dialog( "close" );
});
} 
util.has_thumbnail = false;</script>

 <body>

<div id="ima" style="display:none">
               <div style="width:395px;"> <img id='tailor' class="tailor" src="/public/image/20120904/nishishui/1346756269.jpg" style="width:410px"></div>               
    <form id="form2" action="__APP__/Home/up_photo" method="post">
<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="hidden" id="ima_hidden" name="ima_hidden" value="" />
 <p id="uploader_finished" class="btn small refer " style=" margin-top:10px;"><a href="#" id="" class="" style=""  target="" tabindex="" οnclick="sub_upload1();return false;"></a></p>
                <p id="uploader_startover_button" class="btn small cancel " style="margin-left:135px; margin-top:-30px; margin-bottom:10px" ><a href="#" id="" class="cl_photo" style=""  target="" tabindex=""></a></p>
</form>

</body>

</html>

//php中的代码

 public function qup(){
$data['question']=$_POST['question1'];
$q1a1=$_POST['q1a1'];
$q1a2=$_POST['q1a2'];
$q1a3=$_POST['q1a3'];
$q1a4=$_POST['q1a4'];
$data['keywords']=$_POST['keywords'];
$direction=$_POST['direction'];
$qustion=M('common_question');
$sql = "select question FROM cup_common_question WHERE question LIKE '%".$_POST['keywords']."%'";
$list = $qustion->query($sql);
if(count($direction)==1){
$data['ques_nature']=$direction[0];
}else{
$data['ques_nature']=$direction[0].','.$direction[1];
}
if($q1a3!=null){
$data['ques_option']=$q1a1.'-'.$q1a2.'-'.$q1a3;
}else{
$data['ques_option']=$q1a1.'-'.$q1a2;
}
if($q1a3!=null && $q1a4!=null){
$data['ques_option']=$q1a1.'-'.$q1a2.'-'.$q1a3.'-'.$q1a4;
}
if($data['ques_nature']!=null){
$qustion->data($data)->add();
$sql="select last_insert_id()";
$id=$qustion->query($sql);
}
$this->assign("clist",$list);
$this->assign('qup_id',$id[0]['last_insert_id()']);
$this->display();
}
 
public function up_photo(){
 
$image =substr($_POST['ima_hidden'],2,strlen($_POST


['ima_hidden']));

$res =thumb($image,$_POST['x'],$_POST['y'],$_POST['w'],$_POST


['h'],false,1);
if($res == false){
echo "裁剪失败";
}elseif(is_array($res)){
echo $res['big'];
//加水印
import("ORG.Util.Image");
$Image = new Image();
$nickname=nickname();
            $Image->water($res['big'],'/public/image/1336954430057.png'); 
$User = M('common_user');
$user1 = M("User_dynamic");
// 根据表单提交的POST数据创建数据对象
$data['user_id']=session('user_id');
$data['photos']="/".$res['big'];
$arr=array("photo"=>"/".$res


['big'],"have_photo"=>'1');
$num=$User->where("id='".session


('user_id')."'")->field('photo,have_photo')->find();
//dump($num);
if($num['have_photo']==0){
$User->where("id='".session


('user_id')."'")->setField($arr);
$data['big_photos'] = $_POST['ima_hidden'];
$up_photos= M('user_photos');
$up_photos->add($data);


}else{
$data['big_photos'] = $_POST['ima_hidden'];
$up_photos= M('user_photos');
$up_photos->add($data);     
}
$data['type']="1";
$data['type']=date('Y-m-d H:i:s');
$sql = "update cup_user_dynamic set type='1' , date_time=now() where user_id='".session('user_id')."'";
$user1->query($sql);
echo $res['small'];
}

}

 function getImageInfo($img) {
        $imageInfo = getimagesize($img);
        if( $imageInfo!== false) {
            $imageType = strtolower(substr(image_type_to_extension($imageInfo[2]),1));
            $imageSize = filesize($img);
            $info = array(
                "width" =>$imageInfo[0],
                "height" =>$imageInfo[1],
                "type" =>$imageType,
                "size" =>$imageSize,
                "mime" =>$imageInfo['mime'],
            );
            return $info;
        }else {
            return false;
        }
    }


/**
     +----------------------------------------------------------
     * 生成缩略图
     +----------------------------------------------------------
     * @static
     * @access public
     +----------------------------------------------------------
     * @param string $image  原图
     * @param string $type 图像格式
     * @param string $thumbname 缩略图文件名
     * @param string $maxWidth  宽度
     * @param string $maxHeight  高度
     * @param string $position 缩略图保存目录
     * @param boolean $interlace 启用隔行扫描
     * @param boolean $is_save 是否保留原图
     +----------------------------------------------------------
     * @return void
     +----------------------------------------------------------
     */
 
    function thumb($image,$x,$y,$w,$h,$is_save=true,$suofang=0,$type='',$maxWidth=500,$maxHeight=500,$interlace=true){
        // 获取原图信息
       $info  = getImageInfo($image);
         if($info !== false) {
            $srcWidth  = $info['width'];
            $srcHeight = $info['height'];
            $type = empty($type)?$info['type']:$type;
$type = strtolower($type);
            $interlace  =  $interlace? 1:0;
            unset($info);
            if ($suofang==1) {
                $width  = $srcWidth;
                $height = $srcHeight;
            } else {
                $scale = min($maxWidth/$srcWidth, $maxHeight/$srcHeight); // 计算缩放比例
                if($scale>=1) {
                    // 超过原图大小不再缩略
                    $width   =  $srcWidth;
                    $height  =  $srcHeight;
                }else{
                    // 缩略图尺寸
                    $width  = (int)($srcWidth*$scale);//147
                    $height = (int)($srcHeight*$scale);//199
                }
            }
            // 载入原图
            $createFun = 'ImageCreateFrom'.($type=='jpg'?'jpeg':$type);
            $srcImg     = $createFun($image);


            //创建缩略图
            if($type!='gif' && function_exists('imagecreatetruecolor'))
                $thumbImg = imagecreatetruecolor($width, $height);
            else
                $thumbImg = imagecreate($width, $height);


            // 复制图片
            if(function_exists("ImageCopyResampled"))
                imagecopyresampled($thumbImg, $srcImg, 0, 0, 0, 0, $width, $height, $srcWidth,$srcHeight);
            else
                imagecopyresized($thumbImg, $srcImg, 0, 0, 0, 0, $width, $height,  $srcWidth,$srcHeight);
            if('gif'==$type || 'png'==$type) {
                //imagealphablending($thumbImg, false);//取消默认的混色模式
                //imagesavealpha($thumbImg,true);//设定保存完整的 alpha 通道信息
                $background_color  =  imagecolorallocate($thumbImg,  0,255,0);  //  指派一个绿色
imagecolortransparent($thumbImg,$background_color);  //  设置为透明色，若注释掉该行则输出绿色的图
            }
            // 对jpeg图形设置隔行扫描
            if('jpg'==$type || 'jpeg'==$type) imageinterlace($thumbImg,$interlace);
            //$gray=ImageColorAllocate($thumbImg,255,0,0);
            //ImageString($thumbImg,2,5,5,"ThinkPHP",$gray);
            // 生成图片
            $imageFun = 'image'.($type=='jpg'?'jpeg':$type); 
$length = strlen("00.".$type) * (-1);
$_type = substr($image,-4);
$length = ($type != $_type ? $length+1 : $length);
            //裁剪
            if ($suofang==1) {

$thumbname01 = substr_replace($image,"01.".$type,$length);//大头像
//$thumbname02 = substr_replace($image,"02.".$type,$length);//小头像
$imageFun($thumbImg,$thumbname01,100);
//$imageFun($thumbImg,$thumbname02,100);


                $thumbImg01 = imagecreatetruecolor(190,195);
                imagecopyresampled($thumbImg01,$thumbImg,0,0,$x,$y,190,195,$w,$h);
$thumbImg02 = imagecreatetruecolor(48,48);
                //imagecopyresampled($thumbImg02,$thumbImg,0,0,$_POST['x'],$_POST['y'],48,48,$_POST['w'],$_POST['h']);


$imageFun($thumbImg01,$thumbname01,100);
//$imageFun($thumbImg02,$thumbname02,100);
// unlink($image);
imagedestroy($thumbImg01);
imagedestroy($thumbImg02);
imagedestroy($thumbImg);
imagedestroy($srcImg);


//return array('big' => $thumbname01 , 'small' => $thumbname02);//返回包含大小头像路径的数组
return array('big' => $thumbname01);
            }else{
if($is_save == false){//缩略图覆盖原图，缩略图的路径还是原图路径
$imageFun($thumbImg,$image,100);
}else{
$thumbname03 = substr_replace($image,"03.".$type,$length);//缩略图与原图同时存在，
$imageFun($thumbImg,$thumbname03,100);


imagedestroy($thumbImg);
imagedestroy($srcImg);
return $thumbname03 ;//返回缩略图的路径，字符串
}
}


         }
         return false;
    }

php_jiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
thinkphp5上传图片并利用jcrop插件进行裁剪
憨虫子的博客
03-01 2455
首先说明一下我的项目，wampserver+thinkphp5.0，项目名称是thinkphp5，在应用目录（application）的admin模块下，分别有上传图片的弹出窗口upfile.html和裁剪图片的弹出窗口jcrop.html，文件路径分别是： G:\wamp\www\thinkphp5\templates\admin\view\Upimg\upfile.html G:\wamp
thinkphp +jquery +Jcrop+ajaxfileupload上传图片并裁剪保存到数据库
09-25
无刷新上传图片并且裁剪然后保存到数据库，运用Jcrop+ajaxfileupload+thinkphp +jquery技术
带领大家一起做一个ThinkPHP整合jcrop图片上传裁切预览的例子
weixin_33772645的博客
12-05 89
博客已转移：PHP上传裁切   发现经常有人在技术群里问要PHP图片上传裁切并且预览的例子。今天正好有时间，就亲自做了一个，同时把方法公布出来，让大家可以理解，学会如何用ThinkPHP+jcrop做这个例子。首先先下来jcrop,网址：http://deepliquid.com/content/Jcrop_Download.html   下载完成后，里面有js，demo，css等文件夹.demo...
使用ThinkPHP进行图片批量裁剪
凯
04-13 765
步骤：           1、读取到文件夹下面的所有图片            2、循环通过thumb2方法进行裁剪 01 /** 02  * 裁剪图片 03  */ 04 public functio
php jcrop,thinkphp+jcrop打造的强迫症头像制作
weixin_29322049的博客
03-11 86
1. [图片] qb.png2. [PHP]代码//重点代码//拷贝头像到新画布$newhead = imageCreatetruecolor(180,180);//新建白板，头像imagesavealpha($newhead, true);$color = imagecolorallocatealpha($newhead, 255, 255, 255,127);imagecolortranspa...
thinkphp 头像上传
01-11
thinkphp 官网 的头像预览 上传
thinkphp jquery实现图片上传和预览效果
10-20
主要为大家详细介绍了thinkphp上传图片功能，和jquery预览图片效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery+ThinkPHP实现图片上传
10-15
主要为大家详细介绍了jQuery+ThinkPHP实现图片上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
thinkphp jquery图片上传
08-13
thinkphp jquery图片上传，可以一次上传多张或单张。使用file上传，不用flash上传避免了浏览器不支持flash插件。已做功能有，图片删除，移动。可以设置图片上传大小。代码已经调试，可以直接使用。
ThinkPHP3.2 图片剪裁4步流程代码
lw545034502的博客
03-08 1001
&lt;?php namespace Home\Controller; use Think\Controller; class ImageController extends Controller{ function crop_test(){ //1.实例化image类 $img = new \Think\Image(); //2.调用ope...
基于ThinkPHP头像上传实例
zhangxy
12-12 3103
参考：http://www.thinkphp.cn/topic/29123.html如果上面的链接失效的话就在这下载：https://pan.baidu.com/s/1nvgOid7     提取码 ：j8p6将参考网址中的文件复制到自己的项目中，主要需要第三方扩展文件中的（Vendor/ThinkImage），Public中的相关css和js，因为项目需要，将人家的修改了一点点，上传后的图片直接...
大文件切割上传
webbc的博客
10-14 9230
大家都知道php上传文件有限制，如果没有修改过php.ini文件的话，默认的上传大小限制为2M，那么该如何上传大文件了，比如说上传一个1G多的大文件，可以使用大文件切割上传的方式来解决。何为大文件切割上传？ 原理：利用HTML5的新特性，将文件内容切割成分段的二进制信息，然后每次向服务器上传一段，而服务器，只需要把我们每次上传的二进制信息整合存储到一个文件中，那么最后这个文件就是所上传的文件。由于
php实现切割合并文件
橙虚缘空间
07-27 3445
参考代码：&lt;?php class Cm { public function cut() { $cut_m = 2; $i = 0; $fp = fopen("TC7.0.exe","rb"); ...
PHP+ajaxfileupload 实现用户头像上传
Jerry_Dui的专栏
11-19 9289
今天写项目的时候需要一个让登录的用户上传头像的功能，然后上网搜了一下，发现有一个不错的Ajax插件ajaxfileupload，所以就拿来用，感觉效果不错，在这里和大家分享一下。下面将用PHP+ajaxfileupload 实现用户头像上传。 1. 简单介绍一下ajaxfileupload ajaxfileupload 是Ajax的一个插件，用于实现异步上传文件，它不仅可以上传图片，还可以上传
thinkphp5.07 资源管理预览+图片裁切
32个字符
09-05 1536
先上效果图 1 2裁切效果图 3 功能包括  创建文件夹,上传, 删除,预览(最新上传的文件在前面哦) 4html部分 需引入文件 bootstrap.css bootstrap.min.js cropper.min.css cropper.min.js 自行上网下载 代码部分 $('body').on('click', '.
Thinkphp 图像处理GD库结合jcrop插件总结
阿幻技术学习
06-03 1115
Thinkphp 图像处理使用的是GD库和imagick库，默认使用GD库，imagick怎么使用我还不知道。 所以本章说明的是GD库怎么用 GD库的类库文件在\ThinkPHP\Library\Think\Image.class.php文件 使用的时候在后台方法如下 public function imgjc(){ $image = new \Think\Im
使用jcrop进行头像剪切
热门推荐
chenssy 的技术博客
04-17 1万+
项目需要做一个头像截取的功能，类似于QQ头像截取功能。在网上搜了下，最后使用jQuery插件jcrop来截取， 在后台来进行图片切割。         头像截取的原理：在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面宽度，然后将这四个值传给后 台。在后台要进行放大处理：将切面放大N倍，N=原图/前台展示的头像。即X = X*原图宽/前图宽，Y = Y*原图高/前 图高，
thinkphp6 上传图片
最新发布
03-25
在ThinkPHP6中，可以使用以下代码来实现图片上传： ``` $file = request()->file('image'); // 获取上传的文件 if (!$file) { // 如果没有上传图片，则返回错误信息 return '请上传图片'; } // 移动图片到指定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值