Yii 1.1: jimgareaselect

selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality
14 followers

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...

Total 6 comments

#16491 report it
compugator at 2014/02/28 12:05am
Cannot get the extension to work

I have copied the sample code, changed the photo to my own image, and uploaded the extension files. All I get when I click on the picture is a small thumbnail sized version that drags away as long as I hold down my mouse button and no handles even though I set handles:true. I am using Yiibooster, but I don't know why it would matter. If I go in and change my bootstrap.min file by removing img{max-width:100%} there is no change except my picture becomes enormously full-sized.

I am sure I am just missing something simple. Anyone have any ideas?

#15919 report it
newbie_ at 2013/12/29 12:21pm
Twitter bootstarp fix

If you are have trouble with twitter bootstrap for any img cropping plugin in preview, remove

max-width:100%

in

img{
max-width:100%;
}
#10322 report it
sirin k at 2012/10/19 08:28am
Can i make the drag handler circular?

Can i make the drag handler circular? since i need a circular croping.please let me know if it is possible.

-Sirin

#7891 report it
briiC.lv at 2012/04/25 02:23am
Tested "jimgareaselect" - success

Maybe problem of using it not as extensions in Yii. I have used it in "download/include script/css links"-way, but that should work, right? i was testing with jCrop and debuging what conflicts with that and i found bootstrap in a way of jCrop

Oh i realized one more moment - i using less.js, so maybe my less stylesheet (not actualy downloaded less.js lib) is somehow overriding some styles.. But no problem with this extension, so i will stick with it. And i was able to test it yesterday with given examples in download file and javascript part its works fine - and this is what i needed.

Thanks about these other extensions. I hope i will try it in holidays!

Thanks again :)

#7878 report it
yiqing95 at 2012/04/24 10:40am
@narkomanC thanks for watching , and please test it :)

actually i just use it with bootstrap :

you can try my another extension JCropZoom

and i don't know the jcrop can not go well with the bootstrap , there are two extensions of jcrop : jii-jcrop and jcrop

#7868 report it
briiC.lv at 2012/04/24 05:47am
Twitter bootstrap

Hi! not tested , yet. But looking forward, because im looking replacement for jCrop. jCrop was failing with Twitter bootstrap. I will report how your extension implementation goes. BUT thanks for hope :)

Leave a comment

Please to leave your comment.

Create extension