IE6 下 Jcrop 裁剪头像时裁剪块不透明

Question

页面代码如下：

<script type="text/javascript">

    jQuery(function($){
 
      // Create variables (in this scope) to hold the API and image size

      var jcrop_api, boundx, boundy;
      var img = document.getElementById("target");
      var x=0,y=0;

      if (img!=null) {

       x = (img.width-180)/2;
       y = (img.height-180)/2;

      }
      //var x1 =  

      $('#target').Jcrop({

       setSelect: [ x, y, 180+x, 180+y ],
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1

      },function(){

        // Use the API to get the real image size

        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];

        // Store the API in the jcrop_api variable

        jcrop_api = this;

      });

       function updatePreview(c)
      {
        if (parseInt(c.w) > 0)
        {

          var rx = 180 / c.w;
          var ry = 180 / c.h;

   $('#x').val(c.x);
   $('#y').val(c.y);
   $('#w').val(c.w);
   $('#h').val(c.h);

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };
    });

  </script>

JSP 代码：

<jsp:include flush="true"

 page="/jsp/web/customer/messagespan/messagespan.jsp" />

<div id="name">

 <div class="userName">

 <span class="w22 ff w"><%=player.getName()%></span><span class=""><img src="/images/personalInfo/rightPointIcon.png" /></span><span class="w5 c12 w">修改头像</span>

 </div>

</div>

<div class="clearvery"></div>

<div class="framePosition">

    <div class="nowPhoto">

             <div class="cutMessageShow">

                    <p class="w6 c12 w">设置我的新头像</p>

                    <p style="padding-top:3px;">您可以拖动下面的选框以裁剪满意的头像。</p>

                </div>

                <div class="coutimageBtn"> 

                  <div class="uploadFile">

                        <iframe id="myframe" name="indexframe" 

                            src="jsp/web/customer/personinfo/UploadButton.jsp" width="120" height="50px"

                            height="auto" scrolling="no" frameborder="0"

                            onload="this.height=this.contentWindow.document.body.scrollHeight"></iframe>

                    </div>  

                    <div class="cutsaveBtn">

                        <input type="button"  onclick="saveFace()" class="cutsaveNormal" onmouseover="this.className='cutsaveOver'"  onmouseout="this.className='cutsaveNormal'">

                    </div>

                </div>

            </div>

            

 <div class="clearevery"></div>

 <div id="cut"  style="display:block;">

 

 <table>

 <tr>

 <td width="480px;" align="center" style="border:4px dashed #b2b2b2;padding:10px; vertical-align:middle;">

 <img src="<%=cutUrl%>" id="target" alt="载入失败" />

 </td>

                <td align="center">

                 <img style="margin:0px 5px;" src="/images/reg/preview.png" />

                </td>

 <td align="center">

 <div class="cutFacePreview">

 <img  src="<%=cutUrl%>" id="preview"  alt="预览失败" />

 </div>

 </td>

 </tr>

 </table>

 

 

 

 <div id="dl_links">

 <form id="form1" action="ChangeSaveFace_w.do" method="post" onsubmit="return checkCoords();">

 <input type="hidden" id="x" name="x" />
 <input type="hidden" id="y" name="y" />
 <input type="hidden" id="w" name="w" />
 <input type="hidden" id="h" name="h" />

 </form>

 </div>

</div>

</div>

Answer 1

http://www.iteye.com/topic/864893，IE6下处理png图片方法

Answer 2

这个问题真的是很难解决，看来只能去找flash解决方案了。

Answer 3

解决了么？怎么解决的？

Answer 4

ie6的png透明问题？？这个玩意没用过，只知道ie6有png透明bug。用的是png图片那就是这个了。

Answer 5

引用来自“小编辑”的答案

IE 就这德性，不支持透明地

Answer 6

是在使用jcrop裁剪的时候出现的，各位高人帮忙判断一下什么原因会出现这种情况呗

Answer 7

可是开源中国也是用的这个，IE6下也是好用的

Answer 8

IE 就这德性，不支持透明地