Recursive-image-creator/howto.html at master · Chylb/Recursive-image-creator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <div class="topnav" id="myTopnav">
    <button class="button" onclick="link()">Recursive image creator </button>
    <button class="button"> How to </button>
  </div>

  <div class="textpage">
    <h2>1. Drag and drop the image</h2>
    <img src="./howto/1.png">

    <h2>2. Make crop contour</h2>
    <p>Click on the canvas to create crop points. You can move them by dragging. After you finish, click <em>Lock creating points</em>. </p>
    <img src="./howto/2.png">

    <h2>3. Move recursive images</h2>
    <p>You can do it by dragging canvas except for the crop points.</p>
    <img src="./howto/3.png">

    <h2>4. Rotate and resize recursive images</h2>
    <p>You can do it by dragging red point.</p>
    <img src="./howto/4.png">

    <h2>5. Download the image</h2>
    <p>Click on <em>Save image</em> and enjoy your recursive image!</p>
    <img src="./howto/5.png">
  </div>

  <script>
    function link() {
      window.location.replace("./index.html");
    }
  </script>

</body>
</html>