51 lines
1.6 KiB
PHP
51 lines
1.6 KiB
PHP
|
<div id="set-avatar" class="page">
|
||
|
|
<?= $this->t('.crop_avatar') ?>
|
||
|
|
<p>
|
||
|
|
|
||
|
|
<div class="avatar-crop">
|
||
|
|
<?= $this->inline_image_tag($this->image, ['use_sample' => true], ['id' => "image"]) ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?= $this->formTag([], ['id' => "crop", 'level' => 'member'], function(){ ?>
|
||
|
|
<?= $this->hiddenFieldTag("id", $this->image->id) ?>
|
||
|
|
<?= $this->hiddenFieldTag("left", 0) ?>
|
||
|
|
<?= $this->hiddenFieldTag("right", 0) ?>
|
||
|
|
<?= $this->hiddenFieldTag("top", 0) ?>
|
||
|
|
<?= $this->hiddenFieldTag("bottom", 0) ?>
|
||
|
|
<?php }) ?>
|
||
|
|
|
||
|
|
<script type="text/javascript" charset="utf-8">
|
||
|
|
function onEndCrop(coords, dimensions) {
|
||
|
|
$("left").value = (coords.x1 / $("image").width).toFixed(4);
|
||
|
|
$("right").value = (coords.x2 / $("image").width).toFixed(4);
|
||
|
|
$("top").value = (coords.y1 / $("image").height).toFixed(4);
|
||
|
|
$("bottom").value = (coords.y2 / $("image").height).toFixed(4);
|
||
|
|
}
|
||
|
|
|
||
|
|
// example with a preview of crop results, must have minimumm dimensions
|
||
|
|
var width = $("image").width;
|
||
|
|
var height = $("image").height;
|
||
|
|
var options =
|
||
|
|
{
|
||
|
|
displayOnInit: true,
|
||
|
|
onEndCrop: onEndCrop,
|
||
|
|
minWidth: 1,
|
||
|
|
minHeight: 1
|
||
|
|
}
|
||
|
|
|
||
|
|
'/* Default to a square selection. */'
|
||
|
|
if(width < height)
|
||
|
|
options.onloadCoords = { x1: width/4, y1: width/4, x2: width*2/4, y2: width*2/4 }
|
||
|
|
else
|
||
|
|
options.onloadCoords = { x1: height/4, y1: height/4, x2: height*2/4, y2: height*2/4 }
|
||
|
|
|
||
|
|
new Cropper.ImgWithPreview("image", options)
|
||
|
|
|
||
|
|
OnKey(13, {AlwaysAllowOpera: true}, function(e) {
|
||
|
|
$("crop").submit();
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</div>
|