193 lines
11 KiB
HTML
193 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1 user-scalable=no">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css"
|
|
crossorigin="anonymous">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
|
|
|
|
<link rel="stylesheet" href="dist/cropme.css">
|
|
<title>Cropme | a javascript image cropper</title>
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|
<a class="navbar-brand" href="https://github.com/shpontex/cropme">
|
|
<svg height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
|
|
</svg>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav mr-auto">
|
|
</ul>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://github.com/shpontex/cropme">Documentation</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="p-4">
|
|
<div class="container">
|
|
<div class="description text-center">
|
|
<h1 class="display-4">Cropme</h1>
|
|
<p>Cropme is a customizable and easy to use javascript image cropping plugin </p>
|
|
</div>
|
|
<div class="row mt-5" id="app">
|
|
<div class="col-md-6">
|
|
<div id="cropme"></div>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="cropmeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Cropme result</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<img id="cropme-result" src="" alt="cropme">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="cropmePosition" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Cropme Position output</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<pre><code>{{ position}}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="options">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="title">Viewport Type</div>
|
|
<select class="form-control" v-model="options.viewport.type">
|
|
<option value="square">square (default)</option>
|
|
<option value="circle">circle</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="title">transform origin center</div>
|
|
<select class="form-control" v-model="options.transformOrigin">
|
|
<option value="image">image</option>
|
|
<option value="viewport">viewport (default)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="options">
|
|
<div class="title">Border</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
enable: <select class="form-control" v-model="options.viewport.border.enable">
|
|
<option :value="true">true (default)</option>
|
|
<option :value="false">false</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
width: <select class="form-control" v-model="options.viewport.border.width">
|
|
<option value="2">2 (default)</option>
|
|
<option value="5">5</option>
|
|
<option value="10">10</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
color: <select class="form-control" v-model="options.viewport.border.color">
|
|
<option value="#fff">white (default)</option>
|
|
<option value="#f00">red</option>
|
|
<option value="#00f">bleu</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="options">
|
|
<div class="title">Zoom</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
enable: <select class="form-control" v-model="options.zoom.enable">
|
|
<option :value="true">true (default)</option>
|
|
<option :value="false">false</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
mouseWheel: <select class="form-control" v-model="options.zoom.mouseWheel">
|
|
<option :value="true">true (default)</option>
|
|
<option :value="false">false</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
slider: <select class="form-control" v-model="options.zoom.slider">
|
|
<option :value="true">true</option>
|
|
<option :value="false">false (default)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="options">
|
|
<div class="title">Rotation</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
enable: <select class="form-control" v-model="options.rotation.enable">
|
|
<option :value="true">true (default)</option>
|
|
<option :value="false">false</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
slider: <select class="form-control" v-model="options.rotation.slider">
|
|
<option :value="true">true</option>
|
|
<option :value="false">false (default)</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
Position: <select class="form-control" v-model="options.rotation.position">
|
|
<option value="left">left</option>
|
|
<option value="right">right (default)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<button class="btn btn-outline-danger" @click="reset">Reset </button>
|
|
<button class="btn btn-outline-success float-right" @click="crop">Crop me</button>
|
|
<button class="btn btn-outline-info float-right mr-3" @click="getPosition">Get position</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 w-100 p-3 output">
|
|
<pre><code>{{ options}}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
|
|
<script src="dist/cropme.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
|
|
</html>
|