svg

2025-09-30 21:24:37 +02:00
parent d603fb452a
commit b7b9cebacb
258 changed files with 416 additions and 601 deletions
--- a/templates/Crop/crop02.html.twig
+++ b/templates/Crop/crop02.html.twig
@@ -0,0 +1,71 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+    {{ form_start(form) }}
+        {{ form_widget(form.submit) }}
+        <button class="btn btn-secondary" onClick="closeModal();">Annuler</button>
+
+        <div id='preview' style='overflow:hidden; width:90px; height:90px; position: absolute; top: 0px; right: 10px;'>
+        	<img src="/{{ appAlias }}/uploads/avatar/{{ app.session.get('uploadavatar') }}" style='position: relative;' alt='Thumbnail Preview' />
+	    </div>
+
+        <div style="width:800px; height:590px; overflow:hidden; margin:65px auto 0px auto;">
+            <div id="largeimg" class="crop-select-js" style="width:800px;">
+            </div>
+        </div>
+    {{ form_end(form) }}
+
+{% endblock %}
+
+
+{% block localjavascript %}
+    function move(data) {
+		$('#form_x').val(data.xScaledToImage);
+		$('#form_y').val(data.yScaledToImage);
+
+        preview();
+    }
+
+    function resize(data) {
+		$('#form_w').val(data.widthScaledToImage);
+		$('#form_h').val(data.heightScaledToImage);
+
+        preview();
+    }
+
+    function preview(data) {
+		var scaleX = 90 / $('#form_w').val();
+		var scaleY = 90 / $('#form_h').val();
+
+		$('#preview img').css({
+			width: Math.round(scaleX * $('#largeimg').width()) + 'px',
+			height: Math.round(scaleY * $('#largeimg').height()) + 'px',
+			marginLeft: '-' + Math.round(scaleX * $('#form_x').val()) + 'px',
+			marginTop: '-' + Math.round(scaleY * $('#form_y').val()) + 'px'
+		});
+
+	}
+
+    function reportThumb() {
+        window.parent.$("#user_avatar").val("thumb_{{ app.session.get('uploadavatar') }}");
+        window.parent.$("#user_avatar_img").attr("src","/{{ appAlias }}/uploads/avatar/thumb_{{ app.session.get('uploadavatar') }}");
+        closeModal();
+    }
+
+    function closeModal() {
+        window.parent.$("#extraLargeModal").modal('hide');
+    }
+
+    $(document).ready(function() {
+        window.parent.$(".modal-title").html("ETAPE 2 - Découper votre image");
+
+        $('#largeimg').CropSelectJs({
+            imageSrc: "/{{ appAlias }}/uploads/avatar/{{ app.session.get('uploadavatar') }}",
+            selectionResize: function(data) { resize(data); },
+            selectionMove: function(data) { move(data); },
+        });
+        $('#largeimg').CropSelectJs('setSelectionAspectRatio',1);
+
+        
+	});
+{% endblock %}