实现图片截取+预览功能的jquery插件
dengjianbin
12年前
此插件经过漫画修改可以脱离服务器就可以实现图片预览功能,用户很简单,是互联网上很流行的一种实用功能,如果要保存截取图片的话就可配合程序才可以实现了,先看效果
效果如下:
页面使用代码如下:
<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>