170 lines
7.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>