170 lines
7.0 KiB
HTML
170 lines
7.0 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|||
|
|
<title>图片剪裁示例</title>
|
|||
|
|
<link href="__CDN__/assets/css/frontend{$Think.config.app_debug?'':'.min'}.css?v={$Think.config.site.version}" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="__CDN__/assets/js/html5shiv.js"></script>
|
|||
|
|
<script src="__CDN__/assets/js/respond.min.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="__ADDON__/css/cropper.css">
|
|||
|
|
<link rel="stylesheet" href="__ADDON__/css/main.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!-- Content -->
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="clearfix">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-12">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h2 id="options">剪裁参数</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-warning-light">
|
|||
|
|
<textarea class="form-control" style="height:220px;">
|
|||
|
|
<div class="input-group">
|
|||
|
|
<input id="c-image" class="form-control" size="50" name="row[image]" type="text" value="">
|
|||
|
|
<div class="input-group-addon no-border no-padding">
|
|||
|
|
<span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-aspect-ratio="0.75" data-auto-crop-area="0.5" data-cropped-width="300" data-cropped-height="300" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> 上传</button></span>
|
|||
|
|
</div>
|
|||
|
|
<span class="msg-box n-right" for="c-image"></span>
|
|||
|
|
</div>
|
|||
|
|
<ul class="row list-inline faupload-preview" id="p-image"></ul>
|
|||
|
|
</textarea>
|
|||
|
|
</div>
|
|||
|
|
<table class="table table-condensed table-hover">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>参数</th>
|
|||
|
|
<th>示例</th>
|
|||
|
|
<th>说明</th>
|
|||
|
|
<th>默认</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr class="text-danger">
|
|||
|
|
<td>aspectRatio</td>
|
|||
|
|
<td>data-aspect-ratio="0.8"</td>
|
|||
|
|
<td>比例</td>
|
|||
|
|
<td>0.8</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>autoCropArea</td>
|
|||
|
|
<td>data-auto-crop-area="0.8"</td>
|
|||
|
|
<td>默认自动剪裁的区域大小</td>
|
|||
|
|
<td>0.8</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>cropBoxMovable</td>
|
|||
|
|
<td>data-crop-box-movable="1"</td>
|
|||
|
|
<td>剪裁框是否可移动</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>cropBoxResizable</td>
|
|||
|
|
<td>data-crop-box-resizable="1"</td>
|
|||
|
|
<td>剪裁框是否可变大小</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>minCropBoxWidth</td>
|
|||
|
|
<td>data-min-crop-box-width="0"</td>
|
|||
|
|
<td>最小剪裁框宽度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>minCropBoxHeight</td>
|
|||
|
|
<td>data-min-crop-box-height="0"</td>
|
|||
|
|
<td>最小剪裁框高度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>minContainerWidth</td>
|
|||
|
|
<td>data-min-container-width="0"</td>
|
|||
|
|
<td>最小窗口宽度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>minContainerHeight</td>
|
|||
|
|
<td>data-min-container-height="0"</td>
|
|||
|
|
<td>最小窗口高度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>minCanvasHeight</td>
|
|||
|
|
<td>data-min-canvas-height="0"</td>
|
|||
|
|
<td>最小画布宽度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>minCanvasWidth</td>
|
|||
|
|
<td>data-min-canvas-width="0"</td>
|
|||
|
|
<td>最小画布高度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="text-danger">
|
|||
|
|
<td>croppedWidth</td>
|
|||
|
|
<td>data-cropped-width="300"</td>
|
|||
|
|
<td>剪裁输出宽度</td>
|
|||
|
|
<td>实际宽度</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="text-danger">
|
|||
|
|
<td>croppedHeight</td>
|
|||
|
|
<td>data-cropped-height="300"</td>
|
|||
|
|
<td>剪裁输出宽度</td>
|
|||
|
|
<td>实际高度</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>croppedMinWidth</td>
|
|||
|
|
<td>data-cropped-min-width="400"</td>
|
|||
|
|
<td>最小画布高度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>croppedMinHeight</td>
|
|||
|
|
<td>data-cropped-min-height="400"</td>
|
|||
|
|
<td>最小画布高度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>croppedMaxWidth</td>
|
|||
|
|
<td>data-cropped-max-width="500"</td>
|
|||
|
|
<td>最大画布高度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>croppedMaxHeight</td>
|
|||
|
|
<td>data-cropped-max-height="300"</td>
|
|||
|
|
<td>最大画布高度</td>
|
|||
|
|
<td>0</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>fillColor</td>
|
|||
|
|
<td>data-fill-color="ffffff"</td>
|
|||
|
|
<td>背景填充色，默认为透明</td>
|
|||
|
|
<td>transparent</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h2 id="thanks">特别感谢</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-danger-light">
|
|||
|
|
Cropper.js：<a href="https://github.com/fengyuanchen/cropper" target="_blank">https://github.com/fengyuanchen/cropper</a><br>
|
|||
|
|
QQ小伙伴：CARPE DIEM
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|