|
This tool is designed to help editors use {{t|CSS image crop}} to crop images.
<pre style="font-size:0.5em;white-space: pre-wrap;">(outer = document.createElement("div")).style.CSSText="width:100px";document.body.appendChild(outer);widthNoScroll = outer.offsetWidth;outer.style.overflow = "scroll";(inner = document.createElement("div")).style.width = "100%";outer.appendChild(inner);scrollbarWidth = widthNoScroll - inner.offsetWidth;outer.parentNode.removeChild(outer);lastFile="";lastWidth="";ac=document.getElementById("autocrop");labels = ["Image","bSize","cWidth","cHeight","oTop","oLeft"];function automake(){at=document.getElementById("autotemp");at.innerText="<!--Crop template made using Codehydro's tool; See documentation at Template:CSS image crop-->{{CSS image crop\n| Image\t=\t"+lastFile;for(i=1;i<6;i++) at.innerText+="\n| "+labels[i]+"\t=\t"+cform.elements[i].value;at.innerText+="\n}}";}function updatecrop(){if(lastWidth == ic.naturalWidth){cform.elements[2].value = Math.min(parseInt(cform.elements[2].value),ic.naturalWidth);cform.elements[3].value = Math.min(parseInt(cform.elements[3].value),ic.naturalHeight);pc.style.width=(parseInt(cform.elements[2].value)+scrollbarWidth)+"px";pc.style.height=(parseInt(cform.elements[3].value)+scrollbarWidth)+"px";scrollSet();}}function lastPct(){if(lastWidth == ic.naturalWidth) {lastTopPct = pc.scrollTop/ic.naturalHeight;lastLeftPct = pc.scrollLeft/ic.naturalWidth;lastWidthPct = cform.elements[2].value/ic.naturalWidth;lastHeightPct = cform.elements[3].value/ic.naturalHeight;automake();}}function scrollFind(){if(lastWidth == ic.naturalWidth){pc.scrollTop = Math.min(ic.naturalHeight-cform.elements[3].value,pc.scrollTop);pc.scrollLeft = Math.min(ic.naturalWidth-cform.elements[2].value,pc.scrollLeft);cform.elements[4].value=pc.scrollTop;cform.elements[5].value=pc.scrollLeft;lastPct();}}function scrollSet(){if(lastWidth == ic.naturalWidth){cform.elements[4].value = Math.min(ic.naturalHeight,cform.elements[4].value);cform.elements[5].value = Math.min(ic.naturalWidth,cform.elements[5].value);pc.scrollTop=cform.elements[4].value;pc.scrollLeft=cform.elements[5].value;lastPct();}}function updateimage(){cform.elements[0].value=cform.elements[0].value.replace("File:","");cform.elements[1].value = parseInt(cform.elements[1].value) || lastWidth;if(cform.elements[0].value.length && cform.elements[1].value.length){if(lastFile == cform.elements[0].value){lastPct();ic.src=ic.src.replace(lastWidth+"px",cform.elements[1].value+"px");} else {lastTopPct = 0;lastLeftPct = 0;lastWidthPct = 1;lastHeightPct = 1;lastFile = cform.elements[0].value;load=new XMLHttpRequest();load.open('GET','../wiki/File:'+cform.elements[0].value,false);load.send();console.log('done');(temp=document.createElement('div')).innerHTML=load.responseText;imglink=temp.getElementsByClassName("mw-thumbnail-link");if(imglink.length){ic.src=imglink[0].href.replace(parseInt(imglink[0].innerText.replace(',',''))+"px",cform.elements[1].value+"px");} else {cform.elements[1].value = "WARNING: INVALID IMAGE";}}if(imglink.length){pc.innerHTML="<div id='precrop2' style='display:inline-block;padding-right:"+scrollbarWidth+"px;padding-bottom:"+scrollbarWidth+"px;'>"+ic.outerHTML+"</div>";pc2=document.getElementById("precrop2");pc.style=outerstyle;setTimeout(function(){cform.elements[2].value=Math.round(ic.naturalWidth*lastWidthPct);cform.elements[3].value=Math.round(ic.naturalHeight*lastHeightPct);cform.elements[4].value=Math.round(ic.naturalHeight*lastTopPct);cform.elements[5].value=Math.round(ic.naturalWidth*lastLeftPct);lastWidth = ic.naturalWidth;updatecrop();},99);}}}outerstyle='overflow:scroll;width:auto;height:auto;';ac.innerHTML="<style type='text/css'>input,cform{width:20em;}</style><form id='cform'><table><tr><td>Image:</td><td><input onblur='updateimage()'></td></tr><tr><td>bSize</td><td><input onblur='updateimage()'></td></tr><tr><td>cWidth</td><td><input onblur='updatecrop()'></td></tr><tr><td>cHeight</td><td><input onblur='updatecrop()'></td></tr><tr><td>oTop</td><td><input onblur='scrollSet()'></td></tr><tr><td>oLeft</td><td><input onblur='scrollSet()'></td></tr></table></form><div id='precrop' style='"+outerstyle+"' onscroll='scrollFind()'><img id='imgcrop' src='https://upload.wikimedia.org/wikipedia/commons/d/d2/Blank.png'/></div><pre id='autotemp'></pre>";pc=document.getElementById("precrop");ic=document.getElementById('imgcrop');</pre>
<div id="autocrop" style="border:1px">[If installed, template generator form should replace this text]</div>
== Installation ==
To implement this, add this to your [[Special:MyPage/common.js|common.js]] page (or any skin works fine):
<code>importScript('User:Codehydro/Auto CSS image crop/script.js');</code>
In addition to activating this page, new button "Open Auto CSS image crop" will be available on the far right of the editing toolbar to provide quick access to this tool on other pages. If you do not want this button, simply add <code>DisableAutoCropEverywhere = true;</code> before the the importScript line. The tool will still automatically load on this page.
Alternatively, you may simply copy the above line (or the contents of [[User:Codehydro/Auto CSS image crop/script.js|script.js]] and [[User:Codehydro/Auto CSS image crop/functions.js|functions.js]]) and execute it either in your URL bar, in the JavaScript console, or via a [[bookmarklet]] (just Google it).
== Usage==
=== Quick Start ===
Enter the ''Image'' file (e.g. Dew on grass Luc Viatour.jpg) and a ''bSize'' value. Once both of these are entered press tab or click outside of the form and a preview of your image will automatically appear. Adjust cWidth/cHeight in the form to change how the image is cropped. Change oTop/oLeft or use the scroll bars to position your image. You may change the bSize and the script will resize the image while preserving the crop position. The source code will automatically be generated below the input.
You can also populate values by pasting existing {{t|CSS image crop}} templates into the ''Import'' field (click out to finalize). If the pasted template contains parameters not covered this tool (e.g. Location or Description), the generator will attempt to preserve them in the output code.
=== Check ===
{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
To make sure the generator works properly on your browser, copy the following into the import field and see if it looks just like the image pictured above:
<pre>{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}</pre>
=== Advanced ===
* Press the up/down arrow keys to increase/decrease the field's value by 1% of bSize when in the cWidth, cHeight, oTop, and oLeft fields.
* Click opposite corners of the area you wish to frame and a guide lines will appear. Finalize crop using the "Crop to clicked" button.
* Undo clicks by holding "shift" and click on the image.
* Set cWidth or cHeight field to ">###" and your current crop will be scaled to such that cWidth or cHeight will be "###". Alternatively, you can set the field value to "1>3" or "2>1" and all fields will multiplied by a factor of 3 or divided by 2, respectively.
* Type "max" anywhere in the bSize field and the native width of the image file (max bSize allowed) will be automatically loaded upon clicking out of the field.
| 