1. Requirements
2. Usage
3. Resources

Requirements ¶

i test it in yii 1.1.9 may works in previous version ( Yii 1.1 or above may works ok)

Usage ¶

To use the extension just unzip all of its contents to the /protected/extensions or some other folders (just use the right pathAlias to refer it). then use it like other standard widget classes .

in your view file :

<?php
/**
 * User: yiqing
 * Date: 11-12-3
 * for more usage examples please see here :
 * http://odyniec.net/projects/imgareaselect/examples-callback.html
 */

$this->widget(
    'ext.imgAreaSelect.JImgAreaSelect',
    array(
        'selector' => 'img#photo',
        'apiVarName' => 'ias',
        // 'selectionAreaBorderAnimated'=>true,
        'options' => "js:
        {
            handles: true,
            onSelectEnd: function (img, selection) {
               alert('width: ' + selection.width + '; height: ' + selection.height+
               ' left:'+selection.x1 + ' top:'+selection.y1
               );
             }
        }
        ",
    )
);
?>

<div id="sample1">
    <img id="photo" src="http://a1.att.hudong.com/05/15/300000876508131892158813910_950.jpg" alt="">
</div>

<div id="sample2">
    <script type="text/javascript">


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

            $(img).next().find("img").css({
                width:Math.round(scaleX * 400) + 'px',
                height:Math.round(scaleY * 300) + 'px',
                marginLeft:'-' + Math.round(scaleX * selection.x1) + 'px',
                marginTop:'-' + Math.round(scaleY * selection.y1) + 'px'
            });
        }
        $(document).ready(function () {
            var $img = $("#test2");
            $('<div><img src="" style="position: relative;" /><div>')
                .css({
                    float:'right',
                    position:'relative',
                    overflow:'hidden',
                    width:'100px',
                    height:'100px',
                    margin:'10px'
                }).insertAfter($img)
                .find('img').attr("src", $img.attr("src"));

            $img.imgAreaSelect({ aspectRatio:'1:1', onSelectChange:preview });
        });

    </script>

    <div id="sampleContainer" style="">
        <img src="http://www.szfootball.cn/bbs/attachments/month_0805/20080527_af2c29c95f360edd66efyh2TkOi9XVO0.jpg"
             alt="" id="test2"/>
    </div>
</div>

<div id="test3">
    <?php
    $this->widget(
        'ext.imgAreaSelect.JImgAreaSelect',
        array(
            'selector' => '#test3 img',
            'previewContainer'=>'#test3preview',
            'options' => array(
                'aspectRatio' => '4:3',
                'handles' => true
            ),
        )
    );
    ?>

    <img src="http://img12.3lian.com/gaoqing02/02/57/59.jpg" alt="">

    <div id="test3preview" style="float:right;
                    position:relative;
                    overflow:hidden;
                    width:100px;
                    height:100px;
                    margin:10px">

    </div>

</div>

note:

you can use your apiVar to access the api functionallity see api-mehtods

i just give the client side example , but it 's easy to accomplish in your server side use the WideImage extension

Resources ¶

...external resources for this extension...

• Project page YiiImgAreaSelect
• Try out a demo
• imgAreaSelect on GitHub original plugin