Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jcrop - zmiana koloru foreground
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
hettmix
16.10.2013, 12:03:46
Witam.

Korzystam z biblioteki Jcrop do obróbki zdjęć po stronie przeglądarki. Problem, z którym nie mogę sobie aktualnie poradzić, to jak zmienić kolor zaznaczonego obszaru.
Zmiana background kolor jest prosta:
[HTML] pobierz, plaintext 
  1. $('.img').Jcrop({
  2.  
  3.    bgFade: true,
  4.    bgColor: 'white',
  5.    bgOpacity: 0.3
  6.  
  7. });
[HTML] pobierz, plaintext

Ale czy można zmienić kolor wnętrza zaznaczonego obszaru ?.
nospor
16.10.2013, 12:08:46
Przeciez w zaznaczonym obszarze wyswietla sie oryginalny obrazek, wiec czego kolor ty tam chcesz zmieniac?
sowiq
16.10.2013, 12:10:54
Nadaj odpowiedni styl CSS elementowi. Musi to być zrobione w ten sposób (taka ścieżka), bo istnieją dwa elementy .jcrop-tracker.
[CSS] pobierz, plaintext 
  1. .jcrop-holder div div .jcrop-tracker{
  2.     background: rgba(255, 0, 0, 0.3);
  3. }
[CSS] pobierz, plaintext


Efekt:
hettmix
17.10.2013, 11:38:20
Cytat(nospor @ 16.10.2013, 13:08:46 ) *
Przeciez w zaznaczonym obszarze wyswietla sie oryginalny obrazek, wiec czego kolor ty tam chcesz zmieniac?

Może wyraziłem się mało precyzyjnie - chcę zakryć część obrazu np. poprzez wypełnienie białym kolorem.

Cytat(sowiq @ 16.10.2013, 13:10:54 ) *
Nadaj odpowiedni styl CSS elementowi. Musi to być zrobione w ten sposób (taka ścieżka), bo istnieją dwa elementy .jcrop-tracker.
[CSS] pobierz, plaintext 
  1. .jcrop-holder div div .jcrop-tracker{
  2.     background: rgba(255, 0, 0, 0.3);
  3. }
[CSS] pobierz, plaintext


Efekt:


Faktycznie działa, ale czy można zmienić ten styl dynamicznie ?. W aplikacji użytkownik ma dwie opcje - włączając pierwszą może wyciąć fragment obrazu, włączając drugą może zakryć fragment obrazu.
Czy można w jakiś sposób przełączać się dynamicznie pomiędzy tymi dwiema opcjami mając już załadowany obrazek w ramce ?.
sowiq
17.10.2013, 11:43:59
Cytat(hettmix @ 17.10.2013, 12:38:20 ) *
Czy można w jakiś sposób przełączać się dynamicznie pomiędzy tymi dwiema opcjami mając już załadowany obrazek w ramce ?.


Wystarczy chwilę pomyśleć...

[JAVASCRIPT] pobierz, plaintext 
  1. $('.image_container').addClass('hide_part');
  2.  
  3. // LUB
  4. $('.image_container').removeClass('hide_part');
[JAVASCRIPT] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. .hide_part .jcrop-holder div div .jcrop-tracker{
  2.     background: rgba(255, 0, 0, 0.3);
  3. }
[CSS] pobierz, plaintext

hettmix
17.10.2013, 13:22:25
Cytat(sowiq @ 17.10.2013, 12:43:59 ) *
Wystarczy chwilę pomyśleć...

[JAVASCRIPT] pobierz, plaintext 
  1. $('.image_container').addClass('hide_part');
  2.  
  3. // LUB
  4. $('.image_container').removeClass('hide_part');
[JAVASCRIPT] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. .hide_part .jcrop-holder div div .jcrop-tracker{
  2.     background: rgba(255, 0, 0, 0.3);
  3. }
[CSS] pobierz, plaintext

No niestety coś mi to nie działa. Mam taki oto kod:
[JAVASCRIPT] pobierz, plaintext 
  1. $(window).load(function(){
  2.  
  3. var jcrop_api, boundx, boundy;
  4.  
  5. $('.thumbnailimg').Jcrop({
  6. 	bgFade: true,
  7.     bgOpacity: 1,
  8.     setSelect: [ 0, 0, 0, 0 ]
  9. },function(){
  10.     jcrop_api = this;
  11. });
  12.  
  13.  
  14. 	$('input[type=radio][name=radio_ch]').click(function() {
  15.  
  16. 	if (this.value == 'cut') {
  17.  
  18. 	$('.thumbnailimg').Jcrop({
  19. 	bgFade: false,
  20.     bgOpacity: 1,
  21.     onSelect: function(){
  22.  
  23. 	$.ajax({
  24. 		type: "POST",
  25. 		url: "ajax_modifyimg.php",
  26. 		data: {imgBase64: img},
  27. 		success: function (response) {
  28.             if(response.status === "Unable to save the file.") {
  29. 				console.log('error');
  30.             } else {
  31.  
  32.     var img = document.getElementById("example"),
  33.         $img = $(img),
  34.         imgW = img.naturalWidth,
  35.         imgH = img.naturalHeight;
  36.  
  37.     console.log($img.width());
  38.     console.log($img.height());
  39.  
  40.     var ratioY = imgH / $img.height(),
  41.         ratioX = imgW / $img.width();
  42.  
  43.     var getX = $('#x').val(),
  44.         getY = $('#y').val(),
  45.         getWidth = $('#w').val(),
  46.         getHeight = $('#h').val();
  47.  
  48.  
  49. 	Caman("#example", function () {
  50.  
  51. 	this.crop(getWidth, getHeight, getX, getY);
  52. 	this.render(function () {
  53.  
  54. 	var imgg  = this.toBase64();
  55.  
  56. 	$.ajax({
  57. 		type: "POST",
  58. 		url: "ajax_thumbnail.php",
  59. 		data: {imgBase64: imgg}
  60. 	}).done(function(o) {
  61. 		console.log('saved');
  62. 	});
  63.  
  64.  
  65.   });
  66.  
  67. });				
  68. 		console.log('success');
  69.        }
  70.      }
  71.  
  72. 	}).done(function(o) {
  73. 		console.log('saved');
  74. 	});
  75. }	   
  76. });
  77.     } else if (this.value == 'hide') {
  78.  
  79. 		$('.thumbnailimg').Jcrop({
  80. 		addClass: 'hide_part'
  81. 		});	  
  82.     }
  83. });
  84.  
  85. });	
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <img id="example" class="thumbnailimg" src="modules/mod_raport/jpg_show_modify.php">
[HTML] pobierz, plaintext

Nie działa również w tym przypadku:
[JAVASCRIPT] pobierz, plaintext 
  1.  } else if (this.value == 'hide') {
  2.  
  3. 	$('.thumbnailimg').addClass('hide_part');
  4.     }
[JAVASCRIPT] pobierz, plaintext
sowiq
17.10.2013, 14:17:47
Przyjrzyj się jaką strukturę HTML tworzy Jcrop i odpowiedz sobie na pytanie czy dodanie klasy do obrazka (zaznaczony) ma jakieś znaczenie dla elementu .jcrop-tracker (też zaznaczony).

hettmix
17.10.2013, 14:33:19
Cytat(sowiq @ 17.10.2013, 15:17:47 ) *
Przyjrzyj się jaką strukturę HTML tworzy Jcrop i odpowiedz sobie na pytanie czy dodanie klasy do obrazka (zaznaczony) ma jakieś znaczenie dla elementu .jcrop-tracker (też zaznaczony).


Jak na moje oko związek pomiędzy tymi dwoma elementami jest raczej niewielki, ale pytanie moje brzmiało "Czy można w jakiś sposób przełączać się dynamicznie pomiędzy tymi dwiema opcjami mając już załadowany obrazek w ramce ?."
Może jakaś inna podpowiedź naprowadzi mnie na rozwiązanie problemu.
Nadmienię tylko, że nie zajmuję się zawodowo programowaniem i nie bardzo mam czas na studiowanie tej dziedziny, za to mam problem do rozwiązania i szukam pomocy ze strony ludzi, którzy mają większe pojęcie w tym temacie.
sowiq
17.10.2013, 14:53:08
Zamiast:
[HTML] pobierz, plaintext 
  1. <img src="..." id="example" ... />
[HTML] pobierz, plaintext

Zrób:
[HTML] pobierz, plaintext 
  1. <div class="image_crop_widget">
  2.     <img src="..." id="example" ... />
  3. </div>
[HTML] pobierz, plaintext


A w JS:
[JAVASCRIPT] pobierz, plaintext 
  1. // ZAMIAST TEGO:
  2. else if (this.value == 'hide'){
  3.     $('.thumbnailimg').addClass('hide_part');
  4. }
  5.  
  6. // ZRÓB TAK:
  7. else if (this.value == 'hide'){
  8.     $('.image_crop_widget').addClass('hide_part');
  9. }
[JAVASCRIPT] pobierz, plaintext


Oraz zostaw CSS, który podałem Ci wcześniej:
[CSS] pobierz, plaintext 
  1. .hide_part .jcrop-holder div div .jcrop-tracker{
  2.     background: rgba(255, 0, 0, 0.3);
  3. }
[CSS] pobierz, plaintext
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.