javascript - 使用 CropZoom 插件，图像不会通过 jquery 动态更改

Question

我想动态设置 div 中的图像，但它不起作用

HTML 代码

<img src="pictures/img1.jpg" id="image" style="display:none;"/>

  <ul id="selectable">
    <li><img src="pictures/img2.jpg"/></li>
    <li><img src="pictures/img3.jpg"/></li>
    <li><img src="pictures/img4.jpg"/></li>
    <li><img src="pictures/img5.jpg"/></li>
  </ul>

 <div id="crop_container"></div>
 <div class="result">
    <div class="txt">Here you will see the cropped image</div>
 </div> 
  <div class="button-wrapper">
  <button id="crop" value="Crop">Crop</button>
  <button id="restore" value="Restore">Restore</button>
  </div>

脚本

    <script type="text/javascript">
        $(document).ready(function() {             
            var $setimg = $("#selectable").find('img');
            $setimg.click(function(){
                 $('#image').attr('src',$(this).attr('src'));
                 return false;
            });                           
            var img = $('#image');
            var $image_name = img.attr('src'); 
            var width, height;
            var new_img = $('<img>')
                   .attr('src',img.attr('src'))
                   .css('visibility','hidden')
                   .appendTo("body");

            width = new_img.width();
            height = new_img.height();                                          
            var p = $("#crop_container");
            var pos = p.position();

            var cropzoom = $('#crop_container').cropzoom({
                width: 400,
                height: 300,
                bgColor: '#CCC',
                enableRotation: true,
                enableZoom: true,
                zoomSteps: 10,
                rotationSteps: 10,
                selector: {
                    aspectRatio: true,
                    centered: true,
                    startWithOverlay: true,
                    borderColor: 'blue',
                    borderColorHover: 'red'
                },
                image: {
                    source: $image_name,
                    width: width,
                    height: height,
                    minZoom: 10,
                    maxZoom: 150                        
                }
            });
            cropzoom.setSelector(45, 45, 200, 150, true);

            $('#crop').click(function() {
                cropzoom.send('MyServlet', 'POST', {top:pos.top,left:pos.left}, function(rta) {
                    $('.result').find('img').remove();
                    var img = $('<img />').attr('src', rta);
                    $('.result').find('.txt').hide().end().append(img);
                });
            });

            $('#restore').click(function(){
                $('.result').find('img').remove();
                $('.result').find('.txt').show();
                cropzoom.restore();
            });                             

        });
    </script>

更新

这是完整的代码:Demo Fiddle

Answer 1

好吧，终于找到问题了;)

尝试更改这部分:

 $setimg.click(function(){
      $('#image').attr('src',$(this).attr('src'));
      return false;
});

像这样:

 $setimg.click(function(){
      $('image').attr('href',$(this).attr('src'));
      return false;
});

DEMO

为什么它有效:

Jquery 裁剪，为了精细化图像，生成带有 image 标签的 SVG 图像，并对其应用所有旋转、裁剪和缩放。如果要更改图像，则必须更改此image标签的href

另一种方法是销毁#crop_container并重新生成它，其中包含另一个图像，再次调用.cropzoom。