cropper-image-mask/src/index.html

57 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="ru-RU">
<head>
<title>JCROP</title>
</head>
<body>
<noscript><div class="main-bn">Please, enable javascript.</div></noscript>
<div class="wrapper">
<header id="Header" class="container">
</header>
<main id="MainContent">
<form action="/index.php" method="post" enctype="multipart/form-data" class="form">
<fieldset>
<div class="field file croppie">
<div class="masks">
<h2>Select image mask</h2>
<div class="mask-item" data-src="img/photo1.png">
<img src="img/photo1.png" alt="Mask #1" />
</div>
<div class="mask-item" data-src="img/photo2.jpg">
<img src="img/photo2.jpg" alt="Mask #2" />
</div>
</div>
<label class="left" for="Image">Select image at your computer</label>
<div class="middle-column">
<input type="hidden" name="MAX_FILE_SIZE" value="2097152" />
<input
name="Image"
id="Image"
accept=".png,image/png,.bmp,image/bmp,.gif,image/gif,.svg,image/svg+xml,.jpg,image/jpeg,.jpeg"
type="file"
class="file main-image croppie"
data-width="1280"
data-height="960"
/>
</div>
<label class="right" for="Image">Image will be cropped to 1280 x 960 pixels</label>
</div>
</fieldset>
<div class="btn-toolbar">
<input
type="submit"
name="action_doSubmit"
value="Submit"
class="action btn btn-primary"
id="Submit"
novalidate="novalidate"
/>
</div>
</form>
</main>
</div>
<footer id="Footer" class="site-footer">
</footer>
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>