js制作的图片裁剪应用

声明：如果程序有问题，请各位大虾多多指点，谢谢。

基于psoft.js制作的一款图片裁剪应用

1.应用初始化之前。

2.点击browse按钮，选择图片后，自动上传图片，上传图片后，可以选择你要裁剪的区域，当然也可以放大，缩小，平移

<input type="file" name="cutFile" class="upload" onchange="ajaxSubmit()"/>

当然，对于你裁剪的图片的位置和比例可以在区域里看到，你也可以取消分割线

3.点击upload按钮，就行图片的上传。

function submitCut(){
    if( !(imgRt && imgRt.name) ){
        return;
    }
    psoft.createShade();
    var l = parseInt( $d('srcImg').css('left') );
    var t = parseInt( $$.css('top') );
    var w = parseInt( $$.css('width') );
    var h = parseInt( $$.css('height') );

    var l0 = parseInt( $d('bg4').css('left') ) -l;
    var t0 = parseInt( $$.css('top') ) - t;
    var w0 = parseInt( $$.css('width') );
    var h0 = parseInt( $$.css('height') );
    
    psoft.ajax({
        'url':'photo.php',
        data:{
            'imgWidth':w,
            'imgHeight':h,
            'cutLeft':l0,
            'cutTop':t0,
            'cutWidth':w0,
            'cutHeight':h0,
            'src':imgRt.name,
            'a':'cut'
        },
        success:function(html){
        $d('psoft_shade').hide();
            html = eval('('+html+')');
            $d('cutImg').attr({src:html.msg+'?'+new Date().getTime()});
        },
        fail:function(html){
        $d('psoft_shade').hide();
            alert(html);
        }
    });
}

查看裁剪的图片

发现，裁剪出来的图片跟预期一模一样。

 

技术总结：1.首先通过psoft.js封装的ajaxsubmit来上传图片。实现无刷新上传。

　　　　　2.在图片裁剪图片时，精确获得相应裁剪图的位置和大小跟参数，后台通过php的gd库处理

更多详情，请进入  http://www.pubsoft.net/works/photoCut/index.html