2013-08-19 12 views
6

jcrop을 사용하여 수정할 수없는 javascript로 빌드 된 부분을 선택하고 싶습니다. 이 자바 스크립트는 jcrop을 방해한다고 생각합니다. 그래서 내가 선택한 것을 맨 위에 투명한 gif를 두어 보았습니다. 이것은 jcrop과 간섭을 일으키는 것을 멈추게했고, 지역을 잘 선택했다. 그러나 Jcrop은 투명한 이미지를 투명하지 않고 검은 색으로 만듭니다. 여기 jcrop 투명 이미지가 검은 색으로 변합니다.

이것이 HTML

  <img id="cropbox" src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" style="position: absolute; left: 0px: right: 0px;" /> 
<img id="transparent" src="http://www.golivetutor.com/download/spacer.gif" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px;"/> 

이것은 단지 jcrop에 연결된 투명 이미지를 도시하고 검게 방법이다 jsfiddle http://jsfiddle.net/andieje/rvTmX/

이다.

이 문제를 해결할 수있는 방법이 있습니까? 나는 많은 css를 모른다. 그러나 modifcation이 이미지의 선택되지 않은 영역이 더 이상 회색으로 표시되지 않는다는 것을 의미한다면 나는 괴롭히지 않는다. 단지 선택된 비트 주위에 바운드 사각형을 원한다. 당신이 여기

답변

11

.

그냥 아무것도 당신의 초기화에 bgColor에 대한 옵션을 추가하고 이미지가 투명하게됩니다

$('#transparent').Jcrop({ 
    onChange: showCoords, 
    bgColor: '' 
},function(){ 
    jcrop_api = this; 
}); 
+0

를하거나 이런 불투명도의 설정 :'.jcrop 홀더 {불투명 : 0.5; }'http://jsfiddle.net/sperske/rvTmX/5/ –

+0

사실이지만 크로스 브라우저 지원을 위해 더 많은 불투명도 매개 변수를 설정해야합니다. 그리고 init에'bgOpacity' 옵션을 추가하는 것도 가능합니다. – putvande

+1

http://caniuse.com/css-opacity하지만 잘 모르겠지만 bgOpacity는 확실히 모든 의심을 제거합니다 :) –

0

을 줄 수있는 모든 도움을 주셔서 대단히

감사 솔루션 (link)입니다. rgba (0, 0, 0, 0)를 사용하여 투명한 색상으로 이미지를 div로 변경했습니다. 이것이 당신이 성취하려고 시도하는 것이라면 알려주십시오. jCrop에서 bgColor에 대한 기본 옵션이 '검은 색'로 설정되어 있기 때문에입니다

<div id="transparent" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px; background: rgba(0,0,0,0);"/>

관련 문제