Question

我有用于拍摄图像的div

<div id='container'>
    <input type="button" class='click' value="Crop" onclick="setpic()"/>
</div>

从div“容器”中调用“popup”div我使用

<script type='text/javascript'>
    $(function(){
        var overlay = $('<div id="overlay"></div>');
        $('.close').click(function(){
        $('.popup').hide();
        overlay.appendTo(document.body).remove();
        return false;
    });

    $('.x').click(function(){
        $('.popup').hide();
        overlay.appendTo(document.body).remove();
        return false;
    });

    $('.click').click(function(){
        overlay.show();
        overlay.appendTo(document.body);
        $('.popup').show();
        return false;
    });
});
</script>

我的弹出式窗口是

<div class='popup'>
    <div class='content' id="imgnew" >
        <img class="img-responsive"   id="cropbox" src="<s:url value="%{#session.abc}"/> " />
        <p>
            <s:form action="Cropp" method="post" theme="simple" >
            <s:hidden name="file" value="%{ImageForCrop}" />
            <input type="hidden" name="x1" id="x1"/>
            <input type="hidden" name="y1" id="y1"/>
            <input type="hidden" name="x2" id="x2"/>
            <input type="hidden" name="y2" id="y2"/>
            <input type="hidden" name="w" id="w"/>
            <input type="hidden" name="h" id="h"/>
            <input type="submit" value="Crops" name="action" />
        </s:form>
    </div>
</div>

当我上传图像时，图像应该替换现有图像..我从我提到的第一个div调用onclick。我尝试在用户浏览新图片时更改图片，但我无法更新/替换我使用下面的javascript动态更改它的图片

<script type="text/javascript">
    function setpic()
    {
        var im=document.getElementById("cropbox");
        alert(im.src);
        im.src="uploadedFiles/reek.jpg";
    }

       jQuery(function($) {

        $('#cropbox').Jcrop({
        onSelect: setCoords,
        onChange: setCoords
    });
    });

            function setCoords(c)
            {
              jQuery('#x1').val(c.x);
              jQuery('#y1').val(c.y);
              jQuery('#x2').val(c.x2);
              jQuery('#y2').val(c.y2);
              jQuery('#w').val(c.w);
              jQuery('#h').val(c.h);
             };
</script>

但它不起作用请告诉我哪里出错了..

当我不使用裁剪功能时它会起作用。

Answer 1

    <script>

   function setpic()
   {
      var d = new Date();
      var n = d.getTime();
      var im=document.getElementById("cropbox");
      alert(im.src);
      im.src="uploadedFiles/reek.jpg?"+n;
     }
    </script>

将当前时间戳添加到图像将更新图像。

Answer 2

我只是调用javascript函数来对按钮上的图像进行裁剪单击以弹出图像

就像

一样

   <input type="button" onclick="setpic()" data-popover="true" data-toggle="modal" data-target="#crop" value="Crop" />

我的javascript函数是

   <script type="text/javascript">
     function setpic()
            {
                 $('#cropbox').Jcrop({
                 onSelect: setCoords,
                 onChange: setCoords

            });
            }
     function setCoords(c)
            {
              jQuery('#x1').val(c.x);
              jQuery('#y1').val(c.y);
              jQuery('#x2').val(c.x2);
              jQuery('#y2').val(c.y2);
              jQuery('#w').val(c.w);
              jQuery('#h').val(c.h);
             };

   </script>

我使用此代码更新图片

   var imgs =document.getElementById("cropbox");
   mgs.src = "uploadedFiles/"+res;

现在它正在更新图像并使用裁剪功能

上载另一个图像时替换图像

2 个答案: