Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]kadrowanie i upload zdjęcia
Forum PHP.pl > Forum > Przedszkole
Krismen
8.07.2019, 17:31:19
Próbuję stworzyć uploader do przesyłania zdjęć z możliwością kadrowania i paskiem postępu wysyłania. Chciałbym aby to działało tak, że zdjęcie można wykadrować jeszcze po stronie klienta. Wykorzystuję do tego Croppie-master. Kod mam taki:

[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. 	<div id="test"></div>
  4. 	<div id="demo"></div>
  5.  
  6. 	<button class="btn btn-success crop_image">Przytnij</button>
  7.         <div class="panel-body" align="center">
  8.  
  9.                 <input type="file" name="upload_image" id="upload_image" accept=".jpg, .png" />
  10.  
  11. 		<div class="progress">
  12. 			<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  13. 		</div>
  14.  
  15. 		<div id="targetLayer" style="display:none;"></div>
  16.  
  17. 		<div id="loader-icon" style="display:none;"><img src="loader.gif" /></div>
  18.  
  19. 	</div>
  20.  
  21.  
  22. </body>
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. $( document ).ready(function(){
  4.  
  5. 	$image_crop=$("#demo").croppie({
  6.  
  7. 		enableOrientation: true,
  8.  
  9. 		enableExif: true,
  10. 		viewport: {
  11.  
  12. 		width: 200,
  13. 		height:300,
  14. 		type:'circl'
  15.  
  16. 		},
  17.  
  18.  
  19. 		boundary: 
  20. 		{ 
  21. 			width: 600, 
  22. 			height: 400 
  23. 		},
  24.  
  25. 		showZoomer: true,
  26.  
  27. 	});
  28.  
  29. 	$("#upload_image").on('change',function(){
  30.  
  31. 		var reader = new FileReader();
  32. 		reader.onload = function(event){
  33.  
  34. 			$image_crop.croppie('bind',{
  35.  
  36. 			url: event.target.result
  37.  
  38. 			}).then(function(){
  39.  
  40. 				console.log("OK");
  41.  
  42. 			});
  43. 		}
  44.  
  45. 		reader.readAsDataURL(this.files[0]);
  46.  
  47. 	});
  48.  
  49.  
  50.  
  51. 	$(".crop_image").click(function(event){
  52.  
  53.  
  54. 		$image_crop.croppie('result',{
  55.  
  56. 			type: 'canvas',
  57. 			size: 'viewport'
  58.  
  59.  
  60. 		}).then(function(response){
  61.  
  62. 		$.ajax({
  63.  
  64. 				url:"kadruj.php",
  65. 				type:"POST",
  66.  
  67. 				data:{"image":response},
  68. 				success:function(data)
  69. 				{
  70. 					$("#wykadrowany").html(data);	
  71.  
  72. 					//alert(data);
  73.  
  74.  
  75. 					//$("#upload_image").value(data);
  76.  
  77. 				}
  78.  
  79.  
  80. 		});
  81.  
  82.  
  83. 		})
  84.  
  85.  
  86. 	});
  87.  
  88.  
  89. 	});
  90.  
  91.  
  92. $("#uploadImage").submit(function(event){
  93.  
  94.  
  95. 	if($("#upload_image").val())
  96. 		{
  97. 			var nameFoto=$('#upload_image').val();
  98.  
  99. 			$("#nameFoto").val(nameFoto);
  100.  
  101. 			event.preventDefault();
  102. 			$("#loader-icon").show();
  103. 			$("#targetLayer").hide();
  104. 			$(this).ajaxSubmit({
  105.  
  106. 				target: "#targetLayer",
  107. 				beforeSubmit:function(){
  108.  
  109. 					$('.progress-bar').width('0%');
  110.  
  111. 				},
  112.  
  113. 				uploadProgress: function(event, position, total, percentageComplete)
  114. 				{
  115. 					$(".progress-bar").animate({
  116.  
  117. 						width: percentageComplete + '%'
  118.  
  119. 						}, {
  120. 									duration: 1000
  121.  
  122. 						});
  123.  
  124.  
  125.  
  126.  
  127. 				},
  128.  
  129. 				success: function(){
  130.  
  131. 					$("#loader-icon").hide();
  132. 					$("#targetLayer").show();
  133.  
  134.  
  135.  
  136. 				},
  137.  
  138. 				resetForm: true
  139.  
  140.  
  141. 			});
  142. 		}
  143.  
  144. 		return false;
  145.  
  146.  
  147.  
  148. });
[PHP] pobierz, plaintext


Oryginalną nazwę zdjęcia zmieniam na time() I teraz mam problem w jaki sposób pobrać już wykadrowane zdjęcie do $_FILES. Kombinowałem coś takiego poprzez value ale to nie działa:
<input type="file" name="upload_image" id="upload_image" value="wykadrowane/1562588775.jpg" />

Chodzi o to żeby nie trzeba było już kliknąć w submit „Przeglądaj...” i wskazywać na kadrowany plik jpg tylko aby załadowało się samo zaraz po wykadrowaniu. I później tylko klik w button wyślij i plik leci na serwer. Czy to w ogóle jest realne czy może jednak trzeba najpierw wysłać plik na serwer, tam go kadrować i zapisać.
aras785
9.07.2019, 23:11:14
Cześć, nie jest to możliwe. Jedynie możesz na serwerze przenosić sobie pliki smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.