Photo-editor/ml At Master · Bgrins/photo-editor - GitHub

Trang chủ » Html Photo Editor » Photo-editor/ml At Master · Bgrins/photo-editor - GitHub

Có thể bạn quan tâm

Skip to content Dismiss alert {{ message }} / photo-editor Public
  • Notifications You must be signed in to change notification settings
  • Fork 13
  • Star 6
  • Code
  • Issues
  • Pull requests
  • Actions
  • Projects
  • Wiki
  • Security
  • Insights
Additional navigation options

Files

 master

Breadcrumbs

  1. photo-editor
index.html Blame Blame

Latest commit

 

History

History350 lines (319 loc) · 14.7 KB master
  1. photo-editor
index.htmlTop

File metadata and controls

  • Code
  • Blame
350 lines (319 loc) · 14.7 KBRaw123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Image Editor</title> <meta name="description" content="A demonstration of a basic image editor in JavaScript."> <meta name="author" content="Brian Grinstead"> <!-- build:css css/all.min.css --> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/ui.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet"> <link href="css/jquery.Jcrop.css" rel="stylesheet"> <!-- endbuild --> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="shortcut icon" href="img/favicon.ico"> </head> <body> <div class="container-fluid"> <!-- <form class="form-vertical"> <fieldset> <div class="control-group"> <label class="control-label" for="selectConstraint">Actual Size</label> <div class="controls"> <input type='text' class='small' value='200' /> x <input type='text' class='small' value='300' /> </div> </div> <div class="form-actions"> <button class="btn btn-primary btn-apply">Apply</button> <button class="btn btn-cancel">Cancel</button> </div> </fieldset> </form>--> <section id="collapse"> <div class="page-header"> <h1>JavaScript Image Editing <small>by <a href='http://twitter.com/bgrins'>@bgrins</a></small></h1> </div> <div class="row"> <div class="span3 columns"> <div class="accordion" id="accordion-controls"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion-controls" href="#control-crop"> Crop </a> </div> <div id="control-crop" class="accordion-body collapse"> <form class="form-vertical"> <fieldset> <div class="control-group"> <div class="controls"> <select id="selectConstraint"> <option>No Constraint</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="selectConstraint">Actual Size</label> <div class="controls"> <input type='text' class='small' value='200' /> x <input type='text' class='small' value='300' /> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1"> Scale This Photo </label> </div> </div> <div class="form-actions"> <button class="btn btn-primary btn-apply">Apply</button> <button class="btn btn-cancel">Cancel</button> </div> </fieldset> </form> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion-controls" href="#control-rotate"> Rotate </a> </div> <div id="control-rotate" class="accordion-body collapse"> <div class="accordion-inner"> <form class="form-vertical"> <fieldset> <div class="control-group"> <a class='btn btn-apply' data-action="rotateRight" rel="tooltip" data-src-title="Rotate Right"> <span class="ui-icon ui-icon-arrowrefresh-1-s"></span> </a> <a class='btn btn-apply' data-action="rotateLeft" rel="tooltip" data-src-title="Rotate Left"> <span class="ui-icon ui-icon-arrowrefresh-1-e"></span> </a> <a class='btn btn-apply' data-action="flipv" rel="tooltip" data-src-title="Flip Horizontally" data-toggle="button"> <i class=" icon-resize-horizontal"></i> </a> <a class='btn btn-apply' data-action="fliph" rel="tooltip" data-src-title="Flip Vertically" data-toggle="button"> <i class=" icon-resize-vertical"></i> </a> </div> <div class="form-actions"> <button class="btn btn-primary btn-apply">Apply</button> <button class="btn btn-cancel">Cancel</button> </div> </fieldset> </form> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion-controls" href="#control-exposure"> Exposure </a> </div> <div id="control-exposure" class="accordion-body collapse"> <div class="accordion-inner"> <form class="form-vertical"> <fieldset> <div class="control-group"> <label class="control-label" for="selectConstraint">Actual Size</label> <div class="controls"> <input type='text' class='small' value='200' /> x <input type='text' class='small' value='300' /> </div> </div> <div class="form-actions"> <button class="btn btn-primary btn-apply">Apply</button> <button class="btn btn-cancel">Cancel</button> </div> </fieldset> </form> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion-controls" href="#control-colors"> Colors </a> </div> <div id="control-colors" class="accordion-body collapse"> <div class="accordion-inner"> <form class="form-vertical"> <fieldset> <div class="control-group"> <label class="control-label" for="selectConstraint">Actual Size</label> <div class="controls"> <input type='text' class='small' value='200' /> x <input type='text' class='small' value='300' /> </div> </div> <div class="form-actions"> <button class="btn btn-primary btn-apply">Apply</button> <button class="btn btn-cancel">Cancel</button> </div> </fieldset> </form> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion-controls" href="#control-sharpen"> Sharpen </a> </div> <div id="control-sharpen" class="accordion-body collapse"> <div class="accordion-inner"> <form class="form-vertical"> <fieldset> <div class="control-group"> <label class="control-label" for="selectConstraint">Actual Size</label> <div class="controls"> <input type='text' class='small' value='200' /> x <input type='text' class='small' value='300' /> </div> </div> <div class="form-actions"> <button class="btn btn-primary btn-apply">Apply</button> <button class="btn btn-cancel">Cancel</button> </div> </fieldset> </form> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion-controls" href="#control-resize"> Resize </a> </div> <div id="control-resize" class="accordion-body collapse"> <div class="accordion-inner"> <form class="form-vertical"> <fieldset> <div class="control-group"> <label class="control-label" for="selectConstraint">New Dimensions</label> <div class="controls"> <input type='text' id='resize-x' class='small' /> x <input id='resize-y' type='text' class='small' /> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="resize-percentages"> Use Percentages </label> </div> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="resize-proportions"> Keep Proportions </label> </div> </div> <div class="form-actions"> <button class="btn btn-primary btn-apply">Apply</button> <button class="btn btn-cancel">Cancel</button> </div> </fieldset> </form> </div> </div> </div> </div> </div> </div> </section> <div id='app-container'> <div id='layer-tabs' class="btn-group" data-toggle="buttons-radio"> <a class="btn active" data-layerid='-1'>Start Page</a> </div> <div id='app-scroller'> <section id="main" class="flexbox"> <section id="box-1" class="flexbox"> </section> <section id="box-2" class="flexbox"> <div id='app-img'> <div class='layer active' data-layerid='-1'> <h2>Drag an image in here!!</h2> <input type='file' id='pick-file' multiple webkitdirectory /> <h2>Or, Choose a Sample Image Below</h2> <ul id='sample-photos'></ul> </div> </div> </section> <section id="box-3" class="flexbox"> </section> </section> </div> <div id='zoom-container'> <div id='zoom-preview'> <div class='img'> <div id='zoom-preview-handle'></div> </div> </div> <div class="btn-group" data-toggle="buttons-radio"> <button class='btn active' id='zoomCustom'>zoom</button> <button class='btn' id='zoomFit'>fit</button> </div> <div id='zoom'></div> </div> </div> <footer class="footer"> <!--<p class="pull-right"><a href="#">Back to top</a></p> <p>.</p>--> </footer> <div id='compatibility-error'> Your browser does not support the features needed for this demo, notably HTML canvas. Sorry :( </div> <div id='debug'> <label>X1 <input type="text" size="4" id="x1" name="x1" /></label> <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label> <label>X2 <input type="text" size="4" id="x2" name="x2" /></label> <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label> <label>W <input type="text" size="4" id="w" name="w" /></label> <label>H <input type="text" size="4" id="h" name="h" /></label> </div> </div> <!-- build:js js/shared.min.js --> <script src="js/shared/jquery-1.7.2.js"></script> <script src="js/shared/jquery-ui.js"></script> <!-- endbuild --> <!-- build:js js/app.min.js --> <script src="js/plugins/bootstrap.js"></script> <script src="js/plugins/common.js"></script> <script src="js/plugins/timeago.js"></script> <script src="js/plugins/underscore.js"></script> <script src="js/plugins/filereader.js"></script> <script src="js/plugins/jquery.jCrop.js"></script> <script src="js/plugins/pixastic.custom.js"></script> <script src="js/plugins/handlebars.js"></script> <script src="js/app/processor.js"></script> <script src="js/app/controls.js"></script> <script src="js/app/app.js"></script> <!-- endbuild --> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-8259845-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body></html> You can’t perform that action at this time.

Từ khóa » Html Photo Editor