friendica-github/view/templates/settings/profile/photo/crop.tpl

{{*
  * Copyright (C) 2010-2024, the Friendica project
  * SPDX-FileCopyrightText: 2010-2024 the Friendica project
  *
  * SPDX-License-Identifier: AGPL-3.0-or-later
  *}}
<div class="generic-page-wrapper">
	<h1>{{$title}}</h1>
	<p id="cropimage-desc">
		{{$desc nofilter}}
	</p>

	<div id="cropimage-wrapper">
		<p><img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}"></p>
	</div>

	<div id="cropimage-preview-wrapper">
		<div id="previewWrap" class="crop-preview"></div>
	</div>

	<form action="settings/profile/photo/crop/{{$resource}}" id="crop-image-form" method="post">
		<input type="hidden" name="form_security_token" value="{{$form_security_token}}">

		<input type="hidden" name="xstart" id="x1" />
		<input type="hidden" name="ystart" id="y1" />
		<input type="hidden" name="height" id="height" />
		<input type="hidden" name="width"  id="width" />

		<div id="settings-profile-photo-crop-submit-wrapper" class="pull-right settings-submit-wrapper">
		{{if $skip}}
			<button type="submit" name="action" id="settings-profile-photo-crop-skip" class="btn" value="skip">{{$skip}}</button>
        {{/if}}
			<button type="submit" name="action" id="settings-profile-photo-crop-submit" class="btn btn-primary" value="crop">{{$crop}}</button>
		</div>

		<div class="clear"></div>
	</form>

	<script type="text/javascript" language="javascript">

		var image = document.getElementById('croppa');
		var cropper = new Cropper(image, {
			aspectRatio: 1,
			viewMode: 1,
			preview: '#profile-photo-wrapper, .crop-preview',
			crop: function(e) {
				$('#x1').val(e.detail.x);
				$('#y1').val(e.detail.y);
				$('#width').val(e.detail.width);
				$('#height').val(e.detail.height);
			},
		});

		var skip_button = document.getElementById('settings-profile-photo-crop-skip');

		skip_button.addEventListener('click', function() {
			let image_data = cropper.getImageData();
			cropper.setData({x: 0, y: 0, width: image_data.width, height: image_data.height});
		})
	</script>
</div>