Index.cshtml (1400B)
1@{ 2 ViewData["Title"] = "Home Page"; 3} 4 5<script src="js/jquery-3.7.1.min.js"></script> 6 7<div class="text-center"> 8 <h1 class="display-4">Welcome</h1> 9 <p>Check out this cool, interactive, JS based PhotoEditor. Upload your image and get started right away!</a>.</p> 10 11 <input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"> 12 <p><label for="file" style="cursor: pointer; border: 2px; border-style: dotted;">Upload Image</label></p> 13 <img id="output" width="600"> 14 <br> 15 <p> 16 <a href="#" class="btn btn-primary" onclick="downloadImage()">Download Image</a> 17 <a href="#" class="btn btn-secondary" onclick="editImage('GrayscaleImage', [0.5])">Grayscale</a> 18 <a href="#" class="btn btn-secondary" onclick="editImage('BlackWhiteImage', [])">Black and White</a> 19 <a href="#" class="btn btn-secondary" onclick="editImage('InvertImage', [])">Invert Colors</a> 20 <a href="#" class="btn btn-secondary" onclick="editImage('RotateImage', [90])">Rotate 90 Degrees Clockwise</a> 21 <a href="#" class="btn btn-secondary" onclick="editImage('CropImage', [{'X':0,'Y':0,'W':20,'H':20}], ['PhotoEditor.Models.RectangleStruct'])">Crop 20x20</a> 22 23 </p> 24 <div class="alert alert-danger" style="display:none;" id="lastException" role="alert"> 25 26 </div> 27</div> 28 29