631 lines
30 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">
<!--[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">
<!--@formatter:off-->
<style>
.img-container {
min-height: {$cropper.containerMinHeight|default=200}px;
max-height: {$cropper.containerMaxHeight|default=400}px;
}
</style>
<style data-render="darktheme">
body.darktheme {
background-color: #262626;
}
</style>
<!--@formatter:on-->
</head>
<body style="padding:15px;">
<script>if (parent.document.body.classList.contains("darktheme")) {document.body.classList.add("darktheme");}</script>
<!--@formatter:off-->
<script type="text/javascript">
var require = {
config: {$jsconfig|json_encode}
};
</script>
<!--@formatter:on-->
<!-- Content -->
<div class="">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-9">
<!-- <h3>Demo:</h3> -->
<div class="img-container">
<img id="image" src="{$cropper.url|cdnurl|htmlentities}"/>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3" style="padding-left:0;">
<!-- <h3>Preview:</h3> -->
<div class="docs-preview clearfix">
<div class="img-preview preview-lg"></div>
<div class="img-preview preview-md"></div>
<div class="img-preview preview-sm"></div>
<div class="img-preview preview-xs"></div>
</div>
<!-- <h3>Data:</h3> -->
<div class="docs-data">
<div class="input-group">
<span class="input-group-addon">
<label class="input-group-text" for="dataX">X</label>
</span>
<input type="text" class="form-control" id="dataX" placeholder="x" readonly>
<span class="input-group-addon">
<span class="input-group-text">px</span>
</span>
</div>
<div class="input-group">
<span class="input-group-addon">
<label class="input-group-text" for="dataY">Y</label>
</span>
<input type="text" class="form-control" id="dataY" placeholder="y" readonly>
<span class="input-group-addon">
<span class="input-group-text">px</span>
</span>
</div>
{if $cropper.customWidthHeight && !$cropper.aspectRatio}
<div class="input-group">
<span class="input-group-addon">
<label class="input-group-text" for="dataWidth">宽度</label>
</span>
<input type="text" class="form-control" id="dataWidth" placeholder="width">
<span class="input-group-addon">
<span class="input-group-text">px</span>
</span>
</div>
<div class="input-group">
<span class="input-group-addon">
<label class="input-group-text" for="dataHeight">高度</label>
</span>
<input type="text" class="form-control" id="dataHeight" placeholder="height">
<span class="input-group-addon">
<span class="input-group-text">px</span>
</span>
</div>
{/if}
<div class="input-group">
<span class="input-group-addon">
<label class="input-group-text" for="dataRotate">旋转</label>
</span>
<input type="text" class="form-control" id="dataRotate" placeholder="rotate" readonly>
<span class="input-group-addon">
<span class="input-group-text">deg</span>
</span>
</div>
<div class="input-group hidden">
<span class="input-group-addon">
<label class="input-group-text" for="dataScaleX">水平方向翻转</label>
</span>
<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
</div>
<div class="input-group hidden">
<span class="input-group-addon">
<label class="input-group-text" for="dataScaleY">垂直方向翻转</label>
</span>
<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
</div>
</div>
<div class="docs-toggles">
{if $cropper.customAspectRatio && !$cropper.aspectRatio}
<div class="btn-group d-flex flex-nowrap" data-toggle="buttons" style="margin-top:0px;">
<label class="btn btn-primary active">
<input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 16 / 9">
16:9
</span>
</label>
<label class="btn btn-primary">
<input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 4 / 3">
4:3
</span>
</label>
<label class="btn btn-primary">
<input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 1 / 1">
1:1
</span>
</label>
<label class="btn btn-primary">
<input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 2 / 3">
2:3
</span>
</label>
<label class="btn btn-primary">
<input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: NaN">
Free
</span>
</label>
</div>
{/if}
<div class="btn-group d-flex flex-nowrap" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0" checked="">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="显示模示 0">
VM0
</span>
</label>
<label class="btn btn-primary">
<input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="显示模示 1">
VM1
</span>
</label>
<label class="btn btn-primary">
<input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="显示模示 2">
VM2
</span>
</label>
<label class="btn btn-primary">
<input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="显示模示 3">
VM3
</span>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-9 docs-buttons">
<!-- <h3>Toolbar:</h3> -->
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="移动">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="移动">
<span class="fa fa-arrows"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="剪裁">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="剪裁">
<span class="fa fa-crop"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="缩小">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="缩小">
<span class="fa fa-search-plus"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="放大">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="放大">
<span class="fa fa-search-minus"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="左移">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="左移">
<span class="fa fa-arrow-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="右移">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="右移">
<span class="fa fa-arrow-right"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="上移">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上移">
<span class="fa fa-arrow-up"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="下移">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="下移">
<span class="fa fa-arrow-down"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="向左翻转">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向左翻转">
<span class="fa fa-rotate-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="向右翻转">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向右翻转">
<span class="fa fa-rotate-right"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="水平翻转">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="水平翻转">
<span class="fa fa-arrows-h"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="垂直翻转">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="垂直翻转">
<span class="fa fa-arrows-v"></span>
</span>
</button>
</div>
<div class="btn-group hidden">
<button type="button" class="btn btn-primary" data-method="disable" title="禁用">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="禁用">
<span class="fa fa-lock"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="enable" title="启用">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="启用">
<span class="fa fa-unlock"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="reset" title="重置">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="重置">
<span class="fa fa-refresh"></span>
</span>
</button>
<label class="btn btn-primary btn-upload" for="inputImage" title="上传图片">
<input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="重新上传图片">
<span class="fa fa-upload"></span>
</span>
</label>
</div>
<div class="btn-group btn-group-crop">
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="预览&下载">
预览&下载
</span>
</button>
</div>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="getCroppedCanvasTitle">已剪裁</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">下载图片</a>
</div>
</div>
</div>
</div><!-- /.modal -->
</div><!-- /.docs-buttons -->
<div class="col-md-3 col-sm-3 col-xs-3" style="padding-left:0;">
<div style="margin:0;">
<div class="d-flex">
<button type="button" class="btn btn-success btn-submit btn-embossed mr-1">确定</button>
<button type="button" class="btn btn-default btn-cancel btn-embossed ml-1">取消</button>
</div>
</div>
</div><!-- /.docs-toggles -->
</div>
</div>
<script>
require.callback = function () {
define('cropper', ['jquery', 'bootstrap', 'frontend', 'template', '../addons/cropper/js/cropper'], function ($, undefined, Frontend, Template, undefined, Cropper) {
var Controller = {
cropper: function () {
$("[data-toggle='tooltip']").data("container", "body");
var URL = window.URL || window.webkitURL;
var $image = $('#image');
window.$image = $image;
var console = window.console || {
log: function () {
}
};
var $download = $('#download');
var $dataX = $('#dataX');
var $dataY = $('#dataY');
var $dataHeight = $('#dataHeight');
var $dataWidth = $('#dataWidth');
var $dataRotate = $('#dataRotate');
var $dataScaleX = $('#dataScaleX');
var $dataScaleY = $('#dataScaleY');
var options = {
aspectRatio: parseFloat("{$cropper.aspectRatio|default='NaN'}"),
preview: '.img-preview',
autoCropArea: parseFloat("{$cropper.autoCropArea|default='.8'}"),
cropBoxMovable: !!parseInt("{$cropper.cropBoxMovable|default='1'}"),
cropBoxResizable: !!parseInt("{$cropper.cropBoxResizable|default='1'}"),
minCropBoxWidth: parseInt("{$cropper.minCropBoxWidth|default='0'}"),
minCropBoxHeight: parseInt("{$cropper.minCropBoxHeight|default='0'}"),
minContainerWidth: parseInt("{$cropper.minContainerWidth|default='0'}"),
minContainerHeight: parseInt("{$cropper.minContainerHeight|default='0'}"),
minCanvasWidth: parseInt("{$cropper.minCanvasWidth|default='0'}"),
minCanvasHeight: parseInt("{$cropper.minCanvasHeight|default='0'}"),
crop: function (e) {
$dataX.val(Math.round(e.detail.x));
$dataY.val(Math.round(e.detail.y));
$dataHeight.val(Math.round(e.detail.height));
$dataWidth.val(Math.round(e.detail.width));
$dataRotate.val(e.detail.rotate);
$dataScaleX.val(e.detail.scaleX);
$dataScaleY.val(e.detail.scaleY);
}
};
var croppedOptions = {
minWidth: parseInt("{$cropper.croppedMinWidth|default='0'}"),
minHeight: parseInt("{$cropper.croppedMinHeight|default='0'}"),
maxWidth: parseInt("{$cropper.croppedMaxWidth|default='2048'}"),
maxHeight: parseInt("{$cropper.croppedMaxHeight|default='2048'}"),
fillColor: "{:$cropper.fillColor ? '#' . $cropper.fillColor : 'transparent'}",
};
if (parseInt("{$cropper.croppedMinWidth|default='0'}") > 0) {
croppedOptions.width = parseInt("{$cropper.croppedWidth}");
}
if (parseInt("{$cropper.croppedMinHeight|default='0'}") > 0) {
croppedOptions.height = parseInt("{$cropper.croppedHeight}");
}
var originalImageURL = $image.attr('src');
var uploadedImageName = 'cropped.jpg';
var uploadedImageType = 'image/jpeg';
var uploadedImageURL;
// 实例化
$image.cropper(options);
//确认事件
$(document).on("click", ".btn-submit", function () {
var data = $image.cropper('getData');
var dataURI = $image.cropper('getCroppedCanvas', croppedOptions).toDataURL('image/png');
data.dataURI = dataURI;
Fast.api.close(data);
});
//取消事件
$(document).on("click", ".btn-cancel", function () {
Fast.api.close();
});
// Buttons
if (!$.isFunction(document.createElement('canvas').getContext)) {
$('button[data-method="getCroppedCanvas"]').prop('disabled', true);
}
if (typeof document.createElement('cropper').style.transition === 'undefined') {
$('button[data-method="rotate"]').prop('disabled', true);
$('button[data-method="scale"]').prop('disabled', true);
}
// $dataWidth,$dataHeight点击事件
$('#dataWidth,#dataHeight').change(function () {
const cropBoxData = $image.cropper('getCropBoxData');
const imageData = $image.cropper('getImageData');
const newHeight = imageData.height / imageData.naturalHeight * parseFloat($dataHeight.val());
const newWidth = imageData.width / imageData.naturalWidth * parseFloat($dataWidth.val());
const newCropBoxData = {
left: cropBoxData.left,
top: cropBoxData.top,
height: newHeight,
width: newWidth,
};
$image.cropper('setCropBoxData', newCropBoxData);
});
// Download
if (typeof $download[0].download === 'undefined') {
$download.addClass('disabled');
}
// Options
$('.docs-toggles').on('change', 'input', function () {
var $this = $(this);
var name = $this.attr('name');
var type = $this.prop('type');
var cropBoxData;
var canvasData;
if (!$image.data('cropper')) {
return;
}
if (type === 'checkbox') {
options[name] = $this.prop('checked');
cropBoxData = $image.cropper('getCropBoxData');
canvasData = $image.cropper('getCanvasData');
options.ready = function () {
$image.cropper('setCropBoxData', cropBoxData);
$image.cropper('setCanvasData', canvasData);
};
} else if (type === 'radio') {
options[name] = $this.val();
}
$image.cropper('destroy').cropper(options);
});
// Methods
$('.docs-buttons').on('click', '[data-method]', function () {
var $this = $(this);
var data = $this.data();
var cropper = $image.data('cropper');
var cropped;
var $target;
var result;
if ($this.prop('disabled') || $this.hasClass('disabled')) {
return;
}
if (cropper && data.method) {
data = $.extend({}, data); // Clone a new one
if (typeof data.target !== 'undefined') {
$target = $(data.target);
if (typeof data.option === 'undefined') {
try {
data.option = JSON.parse($target.val());
} catch (e) {
console.log(e.message);
}
}
}
cropped = cropper.cropped;
switch (data.method) {
case 'rotate':
if (cropped && options.viewMode > 0) {
$image.cropper('clear');
}
break;
case 'getCroppedCanvas':
if (uploadedImageType === 'image/jpeg') {
if (!data.option) {
data.option = {};
}
$.extend(data.option, croppedOptions);
data.option.fillColor = '#fff';
}
break;
}
result = $image.cropper(data.method, data.option);
switch (data.method) {
case 'rotate':
if (cropped && options.viewMode > 0) {
$image.cropper('crop');
}
break;
case 'scaleX':
case 'scaleY':
$(this).data('option', -data.option);
break;
case 'getCroppedCanvas':
if (result) {
// Bootstrap's Modal
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
if (!$download.hasClass('disabled')) {
download.download = uploadedImageName;
$download.attr('href', result.toDataURL(uploadedImageType));
}
}
break;
case 'destroy':
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
uploadedImageURL = '';
$image.attr('src', originalImageURL);
}
break;
}
if ($.isPlainObject(result) && $target) {
try {
$target.val(JSON.stringify(result));
} catch (e) {
console.log(e.message);
}
}
}
});
// 键盘支持
$(document.body).on('keydown', function (e) {
if (e.target !== this || !$image.data('cropper') || this.scrollTop > 300) {
return;
}
switch (e.which) {
case 37:
e.preventDefault();
$image.cropper('move', -1, 0);
break;
case 38:
e.preventDefault();
$image.cropper('move', 0, -1);
break;
case 39:
e.preventDefault();
$image.cropper('move', 1, 0);
break;
case 40:
e.preventDefault();
$image.cropper('move', 0, 1);
break;
}
});
// 上传图片
var $inputImage = $('#inputImage');
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
uploadedImageName = file.name;
uploadedImageType = file.type;
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
window.alert('请选择一张图片');
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
}
};
return Controller;
});
};
</script>
<script src="__CDN__/assets/js/require{$Think.config.app_debug?'':'.min'}.js" data-main="__CDN__/assets/js/require-frontend{$Think.config.app_debug?'':'.min'}.js?v={$site.version}"></script>
</body>
</html>