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