Friendica Communications Platform (please note that this is a clone of the repository at github, issues are handled there) https://friendi.ca
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

109 lines
2.8 KiB

11 years ago
11 years ago
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. <meta http-equiv="Content-Language" content="en-us" />
  6. <title>Loading &amp; displaying co-ordinates (with ratio) of crop area on attachment test<</title>
  7. <script src="../lib/prototype.js" type="text/javascript"></script>
  8. <script src="../lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
  9. <script src="../cropper.js" type="text/javascript"></script>
  10. <script type="text/javascript" charset="utf-8">
  11. // setup the callback function
  12. function onEndCrop( coords, dimensions ) {
  13. $PR( 'x1' ).value = coords.x1;
  14. $PR( 'y1' ).value = coords.y1;
  15. $PR( 'x2' ).value = coords.x2;
  16. $PR( 'y2' ).value = coords.y2;
  17. $PR( 'width' ).value = dimensions.width;
  18. $PR( 'height' ).value = dimensions.height;
  19. }
  20. // basic example
  21. Event.observe(
  22. window,
  23. 'load',
  24. function() {
  25. new Cropper.Img(
  26. 'testImage',
  27. {
  28. onEndCrop: onEndCrop,
  29. displayOnInit: true,
  30. onloadCoords: { x1: 10, y1: 10, x2: 210, y2: 110 },
  31. ratioDim: { x: 200, y: 100 }
  32. }
  33. )
  34. }
  35. );
  36. if( typeof(dump) != 'function' ) {
  37. Debug.init(true, '/');
  38. function dump( msg ) {
  39. Debug.raise( msg );
  40. };
  41. } else dump( '---------------------------------------\n' );
  42. </script>
  43. <link rel="stylesheet" type="text/css" href="debug.css" media="all" />
  44. <style type="text/css">
  45. label {
  46. clear: left;
  47. margin-left: 50px;
  48. float: left;
  49. width: 5em;
  50. }
  51. html, body {
  52. margin: 0;
  53. }
  54. #testWrap {
  55. margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <h2>Loading &amp; displaying co-ordinates (with ratio) of crop area on attachment test</h2>
  61. <p>
  62. Some test content before the image
  63. </p>
  64. <div id="testWrap">
  65. <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
  66. </div>
  67. <p>
  68. <label for="x1">x1:</label>
  69. <input type="text" name="x1" id="x1" />
  70. </p>
  71. <p>
  72. <label for="y1">y1:</label>
  73. <input type="text" name="y1" id="y1" />
  74. </p>
  75. <p>
  76. <label for="x2">x2:</label>
  77. <input type="text" name="x2" id="x2" />
  78. </p>
  79. <p>
  80. <label for="y2">y2:</label>
  81. <input type="text" name="y2" id="y2" />
  82. </p>
  83. <p>
  84. <label for="width">width:</label>
  85. <input type="text" name="width" id="width" />
  86. </p>
  87. <p>
  88. <label for="height">height</label>
  89. <input type="text" name="height" id="height" />
  90. </p>
  91. </body>
  92. </html>