• THINKPHP+JS缩放图片式截图的实现


    作者:杨鑫奇

    原始链接:http://www.cnblogs.com/scotoma/archive/2010/03/05/1679477.html

    声明

    本博文转载请注明作者和出处,鄙视转载文章还删改内容的LJ,在TP论坛潜水很久了,光看不做点贡献是不行的,呵呵!在这里得到了老大和国的照顾,这段时间将原来的项目里面的一些值得分享的拿出来和大家一起分享了!希望多多各位指教!THINKPHP,I love you.

    今晚TP论坛的一位大哥加我了,说也遇到这个方面的问题,呵呵!想想其实很多东西都遇到了,是不是应该分享出来呢?其实自己的很多东西都是别人那来的,取之于网络用之于网络!只有大家多分享,才能够提高!

    实现方式

    上传图片 -- 保存并显示图片 -- JS获取缩略图参数 -- 提交位置参数 -- 图片缩放保存类处理图片 -- 保存截取的图片--更新数据库 -- 跳转

    上几张截图

    以下是实例截图

    主要的实现代码

    1 public function cutimg()
    2 {
    3 $result = $this->upload('temp');
    4 if (!is_array($result))
    5 {
    6 $this->redirect('index');
    7 }
    8 else
    9 {
    10 $this->assign('imgurl', '__ROOT__/' . C('ATTACHDIR') . '/temp/' . $result[0]['savename']);
    11 $this->assign('imgname', $result[0]['savename']);
    12 $this->display();
    13 }
    14 }
    1 public function setavatar()
    2 {
    3 if (!empty($_REQUEST['cut_pos']))
    4 {
    5 // import('ORG.Util.ImageResize');
    6   require('ImageResize.class.php');
    7 $imgresize = new ImageResize();
    8 // use the full path
    9   $url = C('ATTACHDIR') . '/temp/' . trim($_POST['imgname']);
    10 $imgresize->load($url);
    11 dump($url);
    12 $posary = explode(',', $_REQUEST['cut_pos']);
    13 foreach($posary as $k => $v)
    14
    15 $posary[$k] = intval($v);
    16
    17 if ($posary[2] > 0 && $posary[3] > 0) $imgresize->resize($posary[2], $posary[3]);
    18
    19 dump($posary);
    20 // create filename rule
    21   $uico = time() . '.jpg';
    22 dump($uico);
    23 $path = C('AVATAR');
    24 // save 120*120 image
    25   $imgresize->cut(120, 120, intval($posary[0]), intval($posary[1]));
    26 $large = 'l_' . $uico;
    27 $imgresize->save($path . $large);
    28
    29 echo '<img src="'.__ROOT__.'/' . $path . $large . '" />';
    30 // update database
    31   }
    32 else
    33 {
    34 // error reporting
    35   }
    36 }

    源代码下载地址: 点击下载  其他的自己去完善了,运行需要TP框架请访问 http://www.thinkphp.cn 下载,然后下载扩展包,因为用到Upload类!

    //------------------------------------------------------------------------------------------------

    20100321更新

    修改了图片 定位到中心 增加了用户体验功能,本功能有 阿粪 同学所写,在此表示感谢呵呵,还要感谢原来JS的作者

    具体修改如下:

    文件路径/tpl/default/index/cutimg.html

    imageresize(flag) 函数内最后一行添加 rePosition();//新增 266行

    grip_Drag(clientX, clientY) 函数内最后一行添加

    文件尾部添加

    //重新定位图片位置

    function rePosition(){


    cut_img.style.left = Math.round(divx/2 - (divx/2-oldMoveLeft)*zoom/oldzoom) + "px";

    cut_img.style.top = Math.round((divy/2+oldMoveTop)*zoom/oldzoom - divy/2) + "px";


    }

    再次感谢阿粪同学!呵呵!

  • 相关阅读:
    bootstrap 导航栏、输入框按钮组、栅格系统
    Python排序算法冒泡排序选择排序插入排序
    Python 解螺旋数组
    初到博客园,请多指教
    gcd, map for ocaml
    qsort for ocaml
    子序列和最大的问题
    将一个整数划分为非负整数的部分
    filter in Ocaml
    scheme中表只能操作头部带来的一个问题
  • 原文地址:https://www.cnblogs.com/scotoma/p/1679477.html
Copyright © 2020-2023  润新知