1 <div class="generic-page-wrapper">
3 <p id="cropimage-desc">
7 <div id="cropimage-wrapper">
8 <p><img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}"></p>
11 <div id="cropimage-preview-wrapper" >
12 <div id="previewWrap" class="crop-preview"></div>
15 <form action="settings/profile/photo/crop/{{$resource}}" id="crop-image-form" method="post">
16 <input type="hidden" name="form_security_token" value="{{$form_security_token}}">
18 <input type="hidden" name="xstart" id="x1" />
19 <input type="hidden" name="ystart" id="y1" />
20 <input type="hidden" name="height" id="height" />
21 <input type="hidden" name="width" id="width" />
23 <div id="settings-profile-photo-crop-submit-wrapper" class="pull-right settings-submit-wrapper">
25 <button type="submit" name="action" id="settings-profile-photo-crop-skip" class="btn" value="skip">{{$skip}}</button>
27 <button type="submit" name="action" id="settings-profile-photo-crop-submit" class="btn btn-primary" value="crop">{{$crop}}</button>
30 <div class="clear"></div>
33 <script type="text/javascript" language="javascript">
35 var image = document.getElementById('croppa');
36 var cropper = new Cropper(image, {
39 preview: '#profile-photo-wrapper, .crop-preview',
41 $('#x1').val(e.detail.x);
42 $('#y1').val(e.detail.y);
43 $('#width').val(e.detail.width);
44 $('#height').val(e.detail.height);
48 var skip_button = document.getElementById('settings-profile-photo-crop-skip');
50 skip_button.addEventListener('click', function() {
51 let image_data = cropper.getImageData();
52 cropper.setData({x: 0, y: 0, width: image_data.width, height: image_data.height});