yii和jquery-UI制作能够切割图片的上传页面

最近boss让我用jqueryUI结合Yii写一个图片上传的东西，能切割图片之类的。

虽然用过jquery写ajax，但是因为以前比较少接触UI开发，在这一方面了解得不多，还得从零起步。一点一点来吧。

列一个git的repo：

[email protected]:casatwy/saejs.git

所有的源代码都在这儿了。

主要是类似 http://meiwei.me/recipe/post的菜谱添加里面的东西。插播一个问题：我很奇怪boss的chromium在上传图片之后可以切割，而我用chrome，鼠标放在图片上却没有显示图片操作之类的工具栏。试了好多遍都不行，很纠结。

yii和jqueryUI的结合:

要先加载jquery.js,然后再加载jquery-UI.js,否则就会出现jqueryUI找不到jquery的问题。

   
   
   
   
//在view中和yii的结合
Yii::app()->clientScript->registerCoreScript('jquery');
   
   
   
   
$cs = Yii::app()->clientScript;
   
   
   
   
//引用外部网址
$cs->registerScriptFile('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js');

//引入本地站点
$cs->registerScriptFile(Yii::app()->baseUrl . '/themes/comm/js/upload.js', CClientScript::POS_HEAD);

//引入css
$cs->registerCssFile(Yii::app()->baseUrl . '/js/star-rating/jquery.rating.css');
01-13 13：07
刚刚在翻阅yii手册的时候，发现yii已经封装好了jUI的相关函数，待我尝试一下。

14:36

   
   
   
   
<?php
    $this->beginWidget('zii.widgets.jui.CJuiDroppable', array(
        'options'=>array(
                'scope'=>'myScope',
                    ),
                    ));
?>
    <div style='height: 500px;width: 500px;background: green;'>drop me </div>
<?php
    $this->endWidget();
?>



<?php
    $this->beginWidget('zii.widgets.jui.CJuiDraggable', array(
        'options'=>array(
                'scope'=>'myScope',
                    ),
                    ));
?>
<div style='height: 90px;width: 90px;background: red;' >drag me </div>
<?php
    $this->endWidget();
?>

大致就是这样，在beginWidget和endWidget之间放入要起到相应效果的div就好了。

接下来要做的事情就是如何获得被拖放进入droppable范围的对象的各种属性以及对它进行处理。因为到时候拖放进去的是一个图片，并且上传它。这个决定先放一放，去研究一下valums的ajax上传插件。

15:02

看来只要直接添加js插件就好了，不复杂，做个demo出来玩玩。

15:45

在yii里面使用第三方库的时候，在相应的controller之前加入以下代码：

Yii::import('application.vendors.*');
require_once('path/to/object.php');

将相应的php对象文件放入protected/vendors文件夹之后，controller就能调用对应的对象了。

现在遇到一个问题，如何在ajax下访问到具体的action.问题已解决。

在yii里面发现了一个基于valums ajaxupload的插件，于是上传图片的demo做好了。接下来就是要做对图片的切割之类的操作了。

01-15 14:45

能够剪切了，但是剪切的虚线框出不来，很郁闷。

15：00

找到原因了，CSS文件也要包含进去。总结一下：

首先要在view里面包含以下下文件：

$cs->registerCssFile(Yii::app()->baseUrl.'/js/imgareaselect/css/imgareaselect-default.css');
$cs->registerScriptFile(Yii::app()->baseUrl.'/js/test.js');
$cs->registerScriptFile(Yii::app()->baseUrl.'/js/imgareaselect/scripts/jquery.imgareaselect.pack.js');

那个test.js是用来放置图片上传和切割的各种回调函数的。加载这些文件之后，view里面放置一个图片标签：

<p>
<img id='imageUploaded' src='' width=400 height=300 ></img>
</p>

这个图片的长和宽涉及切割预览的计算，下面要贴出来的preview函数就是来计算预览图的

function preview(img, selection)
{
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);

    $('#imageUploaded + div > img').css({
        width: Math.round(scaleX * 400) + 'px',//这里的宽和高必须和view里面imageUploaded的宽和高相等，否则预览图错位。
        height: Math.round(scaleY * 300) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
                                                                 });
}

在view里面再添加以下js:

$(document).ready(function () {
    $("<div><img id='imagePreview'  src='' style='position: relative;' /><div>")
        .css({
            float: 'left',
            position: 'relative',
            overflow: 'hidden',
            width: '100px',
            height: '100px'
            }).insertAfter($('#imageUploaded'));
    $('#imageUploaded').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});

以上代码是在页面加载时调用imgselect，css里面设置的style是关于预览图片的。

此时图片的部分选择就已经做好了。接下来就是要获得切分好的图片的相关信息，四个角的坐标。虽然是四个角，其实是两个点，一个是左上角的点（X1，Y1），另外一个是右上角的点（X2，Y2）

需要在页面中添加一个表格，将这四个变量上传到服务端。

服务端暂时还没什么想法，来一句var_dump($_POST)看看是不是都接收到就算了。

客户端这边要添加一个表单：

 <form action="coordinate" method="post">
     <input type="hidden" name="x1" value="" />
     <input type="hidden" name="y1" value="" />
     <input type="hidden" name="x2" value="" />
     <input type="hidden" name="y2" value="" />
     <input type="submit" name="submit" value="Submit" />
</form>

然后加载插件的时候多注册一个事件：onSelectEnd

$('#imageUploaded').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview, onSelectEnd: postCoordinate });

去test.js里面补充一个函数：postCoordinate(img, selection)

function postCoordinate(img, selection)
{
//    alert('here i am');
    $('input[name="x1"]').val(selection.x1);
    $('input[name="y1"]').val(selection.y1);
    $('input[name="x2"]').val(selection.x2);
    $('input[name="y2"]').val(selection.y2);
}

这个函数是用来在切割完毕时候给表单中的各项input设置值用的。点击submit之后就会跳转到coordinate这个action。

到此为止，ajax上传图片和上传图片之后的切割就已经都完成了，服务端也能获得切割后的具体坐标。

15：46

接下来就是要在服务器端切割图片了，我还不知道php有没有这样的函数能够切割图片的。boss说不着急弄，正好这时候把前面的代码重构一下，小view里面乱七八糟的。起码也得把CSS独立出来，让美工方便点。

上传页面的按钮的样式和拖放区的样式都在protected/extensions/EAjaxUpload/assets/fileuploader.css里面

出自： casahama的专栏