xuchaoqing
/
fastadmin_tailored


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