{"id":2717,"date":"2009-12-13T20:05:35","date_gmt":"2009-12-13T19:05:35","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?page_id=2717"},"modified":"2016-12-31T02:46:18","modified_gmt":"2016-12-31T01:46:18","slug":"help","status":"publish","type":"page","link":"https:\/\/www.chipwreck.de\/blog\/software\/cwcrop\/help\/","title":{"rendered":"CwCrop &#8211; Help"},"content":{"rendered":"<div class=\"contentnavi\">\n<p class=\"contentnav1 center\">\n<a href=\"\/blog\/software\/cwcrop\/\">About \/ Feedback<\/a> &bull;<br \/>\n<a href=\"\/blog\/software\/cwcrop\/cwcrop-demo\">Demo<\/a> &bull;<br \/>\n<span class=\"pink\">Help \/ Download<\/span>\n<\/p>\n<p class=\"contentnav2 center\"><a href=\"#help1\">Download\/Requirements<\/a> &bull; <a href=\"#help2\">Documentation<\/a> &bull; <a href=\"#help3\">HTML\/CSS<\/a><\/p>\n<\/div>\n<p><a name=\"help1\"><\/a><\/p>\n<h3>Requirements<\/h3>\n<ul>\n<li>Works in Safari 3+, Firefox 3+, Chrome 3+, IE 6-11 and Opera 9+<\/li>\n<li>Requires mootools 1.23+ with Drag.Move and (for example) PHP to crop the image<\/li>\n<li>(Note: The included local demo has some issues with IE 11, the online version works)<\/li>\n<\/ul>\n<h3>Download<\/h3>\n<p><a class=\"download imgshadow action external\" href=\"http:\/\/mootools.net\/forge\/p\/cwcrop\">Download at Mootools Forge &raquo;<\/a><\/p>\n<h5>Comments? Problems? Feedback? <a href=\"\/blog\/software\/cwcrop\/#respond\"> Leave a comment &raquo;<\/a><\/h5>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n<p><a name=\"help2\"><\/a><\/p>\n<h3>Documentation<\/h3>\n<h5>Usage<\/h5>\n<ul>\n<li>If you use the default settings, the HTML-code found in \/Demo\/ can simply be used (except filename and sizes of course)<\/li>\n<li>Initialize the CwCrop-Object as seen below, adding options you&#8217;d like to change<\/li>\n<li>Here a form is prepared to capture the resulting rectangle dimensions (x,y and w,h)<\/li>\n<li>The method ch.doCrop() triggers the onCrop event, which writes the dimensions to the form fields and submits the form<\/li>\n<\/ul>\n<h5>Javascript Code<\/h5>\n<pre lang=\"javascript\">\r\nvar ch = new CwCrop({\r\n    onCrop: function(values) {\r\n        document.forms[\"crop\"].elements[\"crop[x]\"].value = values.x;\r\n        document.forms[\"crop\"].elements[\"crop[y]\"].value = values.y;\r\n        document.forms[\"crop\"].elements[\"crop[w]\"].value = values.w;\r\n        document.forms[\"crop\"].elements[\"crop[h]\"].value = values.h;\r\n        document.forms[\"crop\"].submit();\r\n    },\r\n    minsize: {x: 100, y: 100},\r\n    maxratio: {x: 2, y: 1},\r\n    fixedratio: false\r\n});<\/pre>\n<h5>Options (with their default values)<\/h5>\n<ul>\n<li><strong>minsize<\/strong>: <em class=\"small\">{x: 60, y: 60}<\/em> &#8211; the minimal size of the resulting image <small>(user can not make it smaller)<\/small><\/li>\n<li><strong>maxsize<\/strong>: <em class=\"small\">{x: 200, y: 200}<\/em> &#8211; the maximal size of the resulting image <small>(user can not make it bigger)<\/small><\/li>\n<li><strong>initialposition<\/strong>: <em class=\"small\">{x: 10, y: 10}<\/em> &#8211; the initial position of the crop area <small>(from top left)<\/small><\/li>\n<li><strong>fixedratio<\/strong>: <em class=\"small\">false<\/em> &#8211; set to a number if the rectangle should have a fixed ratio <small>(maxratio is ignored then)<\/small><\/li>\n<li><strong>maxratio<\/strong>: <em class=\"small\">{x: 2, y: 2}<\/em> &#8211; the maximum ratio for x and y<\/li>\n<li><strong>originalsize<\/strong>: <em class=\"small\">{x: 1, y: 1}<\/em> &#8211; the size of the original image, optional <small>(see below)<\/small><\/li>\n<li><strong>initialmax<\/strong>: <em class=\"small\">false<\/em> &#8211; extend the selection rectangle to the maximum size initially<\/li>\n<li><strong>classactive<\/strong>: <em class=\"small\">&#8220;active&#8221;<\/em> &#8211; name of the class which is applied to the cropframe if the user selects it<\/li>\n<li><strong>cropframe<\/strong>: <em class=\"small\">&#8220;cropframe&#8221;<\/em> &#8211; id of the outer div<\/li>\n<li><strong>imgframe<\/strong>: <em class=\"small\">&#8220;imglayer&#8221;<\/em> &#8211; id of the layer div<\/li>\n<li><strong>cropdims<\/strong>: <em class=\"small\">&#8220;cropdims&#8221;<\/em> &#8211; id of the div which shows the current position\/dimension <small>(can be empty)<\/small><\/li>\n<li><strong>cropbtn<\/strong>: <em class=\"small\">&#8220;cropbtn&#8221;<\/em> &#8211; id of a div (or something else), which trigger the cropping<\/li>\n<li><strong>draghandle<\/strong>: <em class=\"small\">&#8220;draghandle&#8221;<\/em> &#8211; id of the div of the drag-handle<\/li>\n<li><strong>resizehandle<\/strong>: <em class=\"small\">&#8220;resizeHandleXY&#8221;<\/em> &#8211; id of the div of the resize-handle<\/li>\n<\/ul>\n<h5>Events<\/h5>\n<ul>\n<li><strong>onCrop<\/strong> &#8211; Triggered if the user clicks &#8220;crop&#8221; or if doCrop() is called.<br \/>The result is this object: {&#8216;x&#8217;: x-position, &#8216;y&#8217;: y-position, &#8216;w&#8217;: width, &#8216;h&#8217;: height}<\/li>\n<\/ul>\n<h5>Using two images<\/h5>\n<p>\nIt is possible to use one image (a smaller one usually) for the crop area and another one (the <q>original<\/q>) which is cropped. This is useful is you for example crop big photos which are too large to handle in a browser.\n<\/p>\n<p>\nTherefore set <strong>originalsize<\/strong> to the dimensions of the original image, the rest is calculated automatically. The <strong>minsize<\/strong> and <strong>maxsize<\/strong> parameters are used in respect to the original image then.\n<\/p>\n<p>\nNote that there are of course scaling and rounding differences of some pixels if the original image is much larger than the preview image.\n<\/p>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n<p><a name=\"help3\"><\/a><\/p>\n<h5>HTML Code<\/h5>\n<p>This is the structure needed for the crop-tool. The image is referenced two times as background image, the &#8220;imglayer&#8221; needs the image dimensions.<\/p>\n<p>&#8220;cropdims&#8221; is a layer showing the current selected dimensions, you can remove it if it&#8217;s not needed.<\/p>\n<p>Same goes for &#8220;cropbtn&#8221;, remove the line (and add a button somewhere, which triggers &#8220;ch.doCrop()&#8221;).<\/p>\n<pre escaped=\"true\" lang=\"html\">\r\n&lt;div id=\"imgouter\"&gt;\r\n    &lt;div id=\"cropframe\" style=\"background-image: url('image.jpg')\"&gt;\r\n        &lt;div id=\"draghandle\"&gt;&lt;\/div&gt;\r\n        &lt;div id=\"resizeHandleXY\" class=\"resizeHandle\"&gt;&lt;\/div&gt;\r\n        &lt;div id=\"cropinfo\" rel=\"Click to crop\"&gt;\r\n            &lt;div title=\"Click to crop\" id=\"cropbtn\"&gt;&lt;\/div&gt;\r\n            &lt;div id=\"cropdims\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div id=\"imglayer\" style=\"width: 200px; height: 192px; background-image: url(image.jpg')\"&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>You can also use an &#8220;external&#8221; button, which triggers the crop-event:<\/p>\n<pre escaped=\"true\" lang=\"html\">\r\n&lt;button onclick=\"ch.doCrop()\"&gt;Crop&lt;\/button&gt;\r\n<\/pre>\n<h5>CSS Code<\/h5>\n<p>The default CSS code, modify as needed.<\/p>\n<pre lang=\"css\">\r\n#imgouter {\r\n\tposition: relative; border: none; margin-left: 10px;\r\n\tz-index: 200;\r\n}\r\n\r\n#imglayer {\r\n\tpadding: 1px;\r\n\tbackground-position: center center;\r\n\tbackground-color: transparent; background-repeat: no-repeat; opacity: 0.5; cursor: default;\r\n\tfilter:alpha(opacity=50); \/* IE 6-7 Trash *\/\r\n\t-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\"; \/* IE8 Trash *\/\r\n\tz-index: 300;\t\r\n}\t\r\n\r\n#cropframe {\r\n\tposition: absolute; width: 40px; height: 40px; left: 0px; top: 0px; padding: 0px; border: 1px dashed #333; background-repeat: no-repeat;\r\n\t-border-image: url('ants.gif') 1 repeat repeat;\r\n\t-webkit-border-image: url('ants.gif') 1 repeat repeat;\r\n\t-moz-border-image: url('ants.gif') 1 repeat repeat;\r\n\tz-index: 999;\t\t\r\n}\r\n\r\n#cropframe.active {\r\n\tborder: 1px dashed #fff;\r\n}\r\n\r\n#cropinfo {\r\n\tbackground-color: #ccc;\topacity: 0.4; top: 0px; left: 0px; height: 32px; position: absolute;\r\n\tfilter:alpha(opacity=40); \/* IE 6-7 Trash *\/\r\n\t-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)\"; \/* IE8 Trash *\/\t\r\n\tz-index: 600;\r\n}\r\n\r\n#cropdims {\r\n\tcolor: #000; padding: 6px 5px; margin-left: 32px; font-size: 13px;\r\n\tz-index: 500;\r\n}\r\n\r\n#cropbtn {\r\n\tbackground-image:url('crop.gif'); background-repeat: no-repeat;\r\n\tposition: absolute; left: 0px; height: 32px; width: 32px; cursor: pointer !important;\r\n\tz-index: 800;\r\n}\r\n\r\n#cropbtn:hover {\r\n\tbackground-color: black;\r\n}\r\n\r\n#draghandle {\r\n\tbackground-color: transparent; top: 0; left: 0; width: 100%; height: 100%; margin: 0px; position: absolute; cursor: move;\r\n\tz-index: 90;\r\n}\r\n\r\n.resizeHandle {\r\n\tz-index: 40; opacity: 0.9;\r\n\tfilter:alpha(opacity=90); \/* IE 6-7 Trash *\/\r\n\t-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)\"; \/* IE8 Trash *\/\r\n\tbackground-color: #666;\r\n\tposition: absolute; margin: 0px; border: 1px solid #fff; height: 8px; width: 8px;\t\t\r\n}\r\n\r\n#resizeHandleXY {\r\n\tleft: 100%; top: 100%;\t\t\r\n\tcursor: se-resize;\r\n}\r\n<\/pre>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>About \/ Feedback &bull; Demo &bull; Help \/ Download Download\/Requirements &bull; Documentation &bull; HTML\/CSS Requirements Works in Safari 3+, Firefox 3+, Chrome 3+, IE 6-11 and Opera 9+ Requires mootools 1.23+ with Drag.Move and (for example) PHP to crop the image (Note: The included local demo has some issues with IE 11, the online version &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.chipwreck.de\/blog\/software\/cwcrop\/help\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CwCrop &#8211; Help&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":2692,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2717","page","type-page","status-publish","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/PaPEN-HP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/2717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/comments?post=2717"}],"version-history":[{"count":0,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/2717\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/2692"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=2717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}