{"id":575,"date":"2012-11-21T11:18:37","date_gmt":"2012-11-21T03:18:37","guid":{"rendered":"https:\/\/yanjingang.com\/blog\/?p=575"},"modified":"2016-03-16T19:32:13","modified_gmt":"2016-03-16T11:32:13","slug":"jquery%e5%9b%be%e7%89%87%e5%89%aa%e8%a3%81%e6%8f%92%e4%bb%b6-jcrop","status":"publish","type":"post","link":"https:\/\/yanjingang.com\/blog\/?p=575","title":{"rendered":"jQuery\u56fe\u7247\u526a\u88c1\u63d2\u4ef6 Jcrop"},"content":{"rendered":"<p><strong>Jcrop<\/strong>\u662f\u4e00\u4e2ajQuery\u63d2\u4ef6\uff0c\u5b83\u80fd\u4e3a\u4f60\u7684WEB\u5e94\u7528\u7a0b\u5e8f\u5feb\u901f\u7b80\u5355\u5730\u63d0\u4f9b\u56fe\u7247\u88c1\u526a\u7684\u529f\u80fd\u3002<\/p>\n<p><strong>\u7279\u70b9\uff1a<\/strong><\/p>\n<ul>\n<li>\u5bf9\u6240\u6709\u56fe\u7247\u5747unobtrusively\uff08\u65e0\u4fb5\u5165\u7684\uff0c\u4fdd\u6301DOM\u7b80\u6d01\uff09<\/li>\n<li>\u652f\u6301\u5bbd\u9ad8\u6bd4\u4f8b\u9501\u5b9a<\/li>\n<li>\u652f\u6301 minSize \/ maxSize\u8bbe\u7f6e<\/li>\n<li>\u652f\u6301\u6539\u53d8\u9009\u533a\u6216\u79fb \u52a8\u9009\u533a\u65f6\u7684\u56de\u8c03\uff08Callback\uff09<\/li>\n<li>\u652f\u6301\u7528\u952e\u76d8\u5fae\u8c03\u9009 \u533a<\/li>\n<li>\u901a\u8fc7API\u521b\u5efa\u4e92 \u52a8\uff0c\u6bd4\u5982\u52a8\u753b\u6548\u679c<\/li>\n<li>\u652f\u6301CSS\u6837\u5f0f<\/li>\n<\/ul>\n<p><a href=\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2016\/03\/1-2.png\" rel=\"attachment wp-att-576\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-576\" src=\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2016\/03\/1-2.png\" alt=\"1\" width=\"453\" height=\"89\" srcset=\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2016\/03\/1-2.png 453w, https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2016\/03\/1-2-300x59.png 300w\" sizes=\"(max-width: 453px) 100vw, 453px\" \/><\/a><\/p>\n<p><strong>\u5165\u95e8<\/strong><br \/>\n\u2022<a href=\"http:\/\/www.open-open.com\/home\/link.php?url=http:\/\/deepliquid.com%2Fcontent%2FJcrop_Download.html\" target=\"_blank\">\u4e0b\u8f7d\u5f53\u524d\u7248\u672c<\/a><br \/>\n\u2022\u653e\u5230\u9875\u9762\u76f8\u5e94\u7684\u4f4d\u7f6e<br \/>\n\u2022\u540c\u65f6\u4e5f\u9700\u8981\u52a0\u8f7djquery<\/p>\n<p><strong>\u52a0\u8f7d\u987a\u5e8f<\/strong><br \/>\n\u2022jQuery.js<br \/>\n\u2022Jcrop.js<br \/>\n\u2022Jcrop CSS\u6837\u5f0f<br \/>\n\u5982\uff1a<br \/>\n&lt;script src=&#8221;js\/jquery.pack.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;script src=&#8221;js\/jquery.Jcrop.pack.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;css\/jquery.Jcrop.css&#8221; type=&#8221;text\/css&#8221; \/&gt;<br \/>\n\u6ce8\u610f:\u4f60\u4e5f\u53ef\u4ee5\u8c03\u6574\u6210\u5176\u4ed6\u7684\u4f4d\u7f6e<\/p>\n<p><strong>\u8c03\u7528<br \/>\n<\/strong>\u5047\u5982\uff1a&lt;img src=&#8221;flowers.jpg&#8221; id=&#8221;cropbox&#8221; \/&gt;<br \/>\n\u7f16\u5199\u4ee5\u4e0b\u811a\u672c<br \/>\n&lt;script language=&#8221;Javascript&#8221;&gt;<br \/>\njQuery(function() {<br \/>\njQuery(&#8216;#cropbox&#8217;).Jcrop();<br \/>\n});<br \/>\n&lt;\/script&gt;<br \/>\nJcrop\u5c31\u53ef\u4ee5\u6fc0\u6d3b\u4e86<\/p>\n<p><strong>\u4e8b\u4ef6\u5904\u7406<\/strong><br \/>\nJcrop\u67092\u4e2a\u4e3b\u8981\u7684\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f onChange \u548c onSelect.<br \/>\nonSelect callback \u9009\u62e9\u5b8c\u6210\u540e\u8c03\u7528<br \/>\nonChange callback \u9009\u6846\u79fb\u52a8\uff08\u6216\u8005\u8bf4\u6539\u53d8\uff09\u65f6\u8c03\u7528<br \/>\n\u5b9a\u4e49\u4e00\u4e2a\u4e8b\u4ef6\u51fa\u6765\u51fd\u6570<br \/>\n&lt;script language=&#8221;Javascript&#8221;&gt;<br \/>\nfunction showCoords(c)<br \/>\n{<br \/>\n\/\/ variables can be accessed here as<br \/>\n\/\/ c.x, c.y, c.x2, c.y2, c.w, c.h<br \/>\n};<br \/>\n&lt;\/script&gt;<br \/>\n\u7136\u540e\u9644\u52a0\u4e0a\u53bb<br \/>\n&lt;script language=&#8221;Javascript&#8221;&gt;<br \/>\njQuery(function() {<br \/>\njQuery(&#8216;#cropbox&#8217;).Jcrop({<br \/>\nonSelect: showCoords,<br \/>\nonChange: showCoords<br \/>\n});<br \/>\n});<br \/>\n&lt;\/script&gt;<br \/>\n\u8fd9\u662f\u4e00\u4e2a\u6807\u51c6\u7684jquery\u8bed\u6cd5\uff0c\u6ce8\u610f\u6700\u597d\u4e00\u4e2a\u5c5e\u6027\u540e\u9762\u6ca1\u6709\u9017\u53f7<\/p>\n<p><strong>\u8bbe\u7f6e\u9009\u9879<\/strong><br \/>\n\u53c2\u6570\u540d\u79f0 \u7c7b\u578b \u63cf\u8ff0 \u9ed8\u8ba4<br \/>\naspectRatio decimal \u8bbe\u5b9a\u5bbd\u9ad8\u6bd4 n\/a<br \/>\nminSize array [ w, h ] \u8bbe\u7f6e\u6700\u5c0f\u5c3a\u5bf8 n\/a<br \/>\nmaxSize array [ w, h ] \u8bbe\u7f6e\u6700\u5927\u5c3a\u5bf8 n\/a<br \/>\nsetSelect array [ x, y, x2, y2 ] \u8bbe\u7f6e\u4e00\u4e2a\u521d\u9009\u6846\u7684\u4f4d\u7f6e n\/a<br \/>\nbgColor color value \u8bbe\u7f6e\u80cc\u666f\u5bb9\u5668\u989c\u8272 &#8216;black&#8217;<br \/>\nbgOpacity decimal 0 &#8211; 1 \u8bbe\u7f6e\u5f53\u56fe\u50cf\u88ab\u88c1\u526a\u9009\u6846\u5916\u7684\u900f\u660e\u5ea6 .6<br \/>\n\u5982\uff1a<\/p>\n<div class=\"cnblogs_code\">\n<div class=\"cnblogs_code_toolbar\"><\/div>\n<p>&lt;script language=&#8221;Javascript&#8221;&gt;jQuery(function() {jQuery(&#8216;#cropbox&#8217;).Jcrop({onSelect: showCoords,bgColor: &#8216;black&#8217;,bgOpacity: .4,setSelect: [ 100, 100, 50, 50 ],aspectRatio: 16 \/ 9});});&lt;\/script&gt;<\/p>\n<div class=\"cnblogs_code_toolbar\"><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"uchome-message-pic\"><a href=\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2016\/03\/2.jpg\" rel=\"attachment wp-att-577\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-577\" src=\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2016\/03\/2.jpg\" alt=\"2\" width=\"550\" height=\"254\" srcset=\"https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2016\/03\/2.jpg 550w, https:\/\/yanjingang.com\/blog\/wp-content\/uploads\/2016\/03\/2-300x139.jpg 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jcrop\u662f\u4e00\u4e2ajQuery\u63d2\u4ef6\uff0c\u5b83\u80fd\u4e3a\u4f60\u7684WEB\u5e94\u7528\u7a0b\u5e8f\u5feb\u901f\u7b80\u5355\u5730\u63d0\u4f9b\u56fe\u7247\u88c1\u526a\u7684\u529f\u80fd\u3002 \u7279\u70b9\uff1a \u5bf9\u6240\u6709\u56fe\u7247\u5747 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[26],"tags":[318,29,317],"_links":{"self":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/575"}],"collection":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=575"}],"version-history":[{"count":0,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/575\/revisions"}],"wp:attachment":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}