Jcrop - zmiana koloru foreground Opcje

[hettmix]

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 
$('.img').Jcrop({
 
   bgFade: true,
   bgColor: 'white',
   bgOpacity: 0.3
 
});
[HTML] pobierz, plaintext 

Ale czy można zmienić kolor wnętrza zaznaczonego obszaru ?.

[nospor]

Przeciez w zaznaczonym obszarze wyswietla sie oryginalny obrazek, wiec czego kolor ty tam chcesz zmieniac?

[sowiq]

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 
.jcrop-holder div div .jcrop-tracker{
    background: rgba(255, 0, 0, 0.3);
}
[CSS] pobierz, plaintext 

Efekt:

[hettmix]

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.

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 
.jcrop-holder div div .jcrop-tracker{
    background: rgba(255, 0, 0, 0.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]

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 
$('.image_container').addClass('hide_part');
 
// LUB
$('.image_container').removeClass('hide_part');
[JAVASCRIPT] pobierz, plaintext 

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

Ten post edytował sowiq 17.10.2013, 11:44:41

[hettmix]

Wystarczy chwilę pomyśleć...

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

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

No niestety coś mi to nie działa. Mam taki oto kod:

[JAVASCRIPT] pobierz, plaintext 
$(window).load(function(){
 
var jcrop_api, boundx, boundy;
 
$('.thumbnailimg').Jcrop({
	bgFade: true,
    bgOpacity: 1,
    setSelect: [ 0, 0, 0, 0 ]
},function(){
    jcrop_api = this;
});
 
 
	$('input[type=radio][name=radio_ch]').click(function() {
 
	if (this.value == 'cut') {
 
	$('.thumbnailimg').Jcrop({
	bgFade: false,
    bgOpacity: 1,
    onSelect: function(){
 
	$.ajax({
		type: "POST",
		url: "ajax_modifyimg.php",
		data: {imgBase64: img},
		success: function (response) {
            if(response.status === "Unable to save the file.") {
				console.log('error');
            } else {
 
    var img = document.getElementById("example"),
        $img = $(img),
        imgW = img.naturalWidth,
        imgH = img.naturalHeight;
 
    console.log($img.width());
    console.log($img.height());
 
    var ratioY = imgH / $img.height(),
        ratioX = imgW / $img.width();
 
    var getX = $('#x').val(),
        getY = $('#y').val(),
        getWidth = $('#w').val(),
        getHeight = $('#h').val();
 
 
	Caman("#example", function () {
 
	this.crop(getWidth, getHeight, getX, getY);
	this.render(function () {
 
	var imgg  = this.toBase64();
 
	$.ajax({
		type: "POST",
		url: "ajax_thumbnail.php",
		data: {imgBase64: imgg}
	}).done(function(o) {
		console.log('saved');
	});
 
 
  });
 
});				
		console.log('success');
       }
     }
 
	}).done(function(o) {
		console.log('saved');
	});
}	   
});
    } else if (this.value == 'hide') {
 
		$('.thumbnailimg').Jcrop({
		addClass: 'hide_part'
		});	  
    }
});
 
});	
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
<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 
 } else if (this.value == 'hide') {
 
	$('.thumbnailimg').addClass('hide_part');
    }
[JAVASCRIPT] pobierz, plaintext 

[sowiq]

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]

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]

Zamiast:

[HTML] pobierz, plaintext 
<img src="..." id="example" ... />
[HTML] pobierz, plaintext 

Zrób:

[HTML] pobierz, plaintext 
<div class="image_crop_widget">
    <img src="..." id="example" ... />
</div>
[HTML] pobierz, plaintext 

A w JS:

[JAVASCRIPT] pobierz, plaintext 
// ZAMIAST TEGO:
else if (this.value == 'hide'){
    $('.thumbnailimg').addClass('hide_part');
}
 
// ZRÓB TAK:
else if (this.value == 'hide'){
    $('.image_crop_widget').addClass('hide_part');
}
[JAVASCRIPT] pobierz, plaintext 

Oraz zostaw CSS, który podałem Ci wcześniej:

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

Ten post edytował sowiq 17.10.2013, 14:54:17