jquery實現圖片截取+預覽功能

dengjianbin 12年前發布 | 43K 次閱讀圖片截取圖片展示jQuery插件 jQuery插件

此Jquery插件經過漫畫修改可以脫離服務器就可以實現圖片預覽功能，用戶很簡單，是互聯網上很流行的一種實用功能，如果要保存截取圖片的話就可配合程序才可以實現了。

主要功能代碼如下：

<script type="text/javascript">
    jQuery(function($){
        $('#target').Jcrop({
            onChange:   showCoords,
            onSelect:   showCoords,
            onRelease:  clearCoords//,
            //minSize: [164, 164],
            //setSelect: [0, 0, 164, 164] 
        }); 
    });     
    function showCoords(c){
        $('#txtX1').val(c.x);
        $('#txtY1').val(c.y);
        $('#txtX2').val(c.x2);
        $('#txtY2').val(c.y2);
        $('#txtW').val(c.w);
        $('#txtH').val(c.h);   

        $('#show').css({"backgroundPosition":"-"+c.x+"px -"+c.y+"px","width":c.w,"height":c.h}); 
    };

    function clearCoords(){
        $('#coords input').val('');
        $('#h').css({color:'red'});
        window.setTimeout(function(){
            $('#h').css({color:'inherit'});
        },500);
    };
</script>

效果如下：