Question

我正在使用编辑功能（旋转，缩放和裁剪）构建ajax上传，并且我正在使用matiasgagliano（https://github.com/matiasgagliano/guillotine）的断头台进行此操作。我的问题是上传后用户通过ajax被重定向到编辑页面，但是当登陆该页面时，我总是要在浏览器中刷新页面以加载图像。

我已尝试通过js和php自动重新加载，但这没有帮助，也没有添加按钮来再次加载相同的URL。仅从浏览器按钮刷新（在多个浏览器中测试）有效。我尝试过实现jquery.turbolinks，但这使得断头台功能停止工作。

我在jQuery之后加载了head部分的guillotine.js，并在body标签之前将函数放在底部。

任何提示或帮助将不胜感激。 THX

以下是一些代码： HTML：

<div class='frame'>
    <img id="id_picture" src="identifications/<?php echo $id_url; ?>" alt="id" />
</div>

<div id='controls'>
    <a href='javascript:void(0)' id='rotate_left'  title='<?php echo $word_row[434]; ?>'><i class='fa fa-rotate-left'></i></a>
    <a href='javascript:void(0)' id='zoom_out'     title='<?php echo $word_row[436]; ?>'><i class='fa fa-search-minus'></i></a>
    <a href='javascript:void(0)' id='fit'          title='<?php echo $word_row[438]; ?>'><i class='fa fa-arrows-alt'></i></a>
    <a href='javascript:void(0)' id='zoom_in'      title='<?php echo $word_row[437]; ?>'><i class='fa fa-search-plus'></i></a>
    <a href='javascript:void(0)' id='rotate_right' title='<?php echo $word_row[435]; ?>'><i class='fa fa-rotate-right'></i></a>
</div>

JS：

<script type='text/javascript'>

  jQuery(function() {
    var picture = $('#id_picture');

    picture.guillotine({
      width: 240,
      height: 180
    });

    picture.on('load', function(){
      // Initialize plugin (with custom event)
      picture.guillotine({eventOnChange: 'guillotinechange'});

      // Display inital data
      var data = picture.guillotine('getData');
      for(var key in data) { $('#'+key).html(data[key]); }

      // Bind button actions
      $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
      $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
      $('#fit').click(function(){ picture.guillotine('fit'); });
      $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
      $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
      $('#process').click(function(){ 

          $.ajax({ 
            type: "POST", 
            url: "scripts/process_id.php?id=<?php echo $emp_id; ?>&user=<?php echo $user; ?>", 
            data: data,
            cache: false,
            success: function(html)
            {
                window.location = "<?php echo $finish_url; ?>";
            } 
          });

      });

      // Update data on change
      picture.on('guillotinechange', function(ev, data, action) {
        data.scale = parseFloat(data.scale.toFixed(4));
        for(var k in data) { $('#'+k).html(data[k]); }
      });


    });

  });
</script>

Answer 1

确保加载DOM树和脚本。

var script = document.createElement('script');
script.src = "guillotine-master/js/jquery.guillotine.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = function () { 

jQuery(function() { 
        var picture = $('#sample_picture');

        picture.guillotine({
          width: 240,
          height: 300
        });

        picture.on('load', function(){
          // Initialize plugin (with custom event)
          picture.guillotine({eventOnChange: 'guillotinechange'});

          // Display inital data
          var data = picture.guillotine('getData');
          for(var key in data) { $('#'+key).html(data[key]); }

          // Bind button actions
          $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
          $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
          $('#fit').click(function(){ picture.guillotine('fit'); });
          $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
          $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
          $('#process').click(function(){ 

              $.ajax({ 
                type: "POST", 
                url: "scripts/process_img.php?id=<?php echo $emp_id;?>&user=<?php echo $user; ?>", 
                data: data,
                cache: false,
                success: function(html)
                {
                    window.location = "<?php echo $finish_url; ?>";
                } 
              });

          });

          // Update data on change
          picture.on('guillotinechange', function(ev, data, action) {
            data.scale = parseFloat(data.scale.toFixed(4));
            for(var k in data) { $('#'+k).html(data[k]); }
          });


        });

    });
};

Answer 2

您在 onload 处理程序之前和之内错误地加载了 Guillotine 两次。

您应该在加载图片后初始化 Guillotine ，只需一次：

var picture = $('#sample_picture');

picture.on('load', function(){
  picture.guillotine({
    width: 400, 
    height: 300,
    eventOnChange: 'guillotinechange'
  });

  ...
});

如果在修复此问题后仍然遇到任何问题，请注意，如果已加载图像， onload 事件永远不会被触发，即使图像不存在但已缓存在为 onload 设置处理程序之前可能会加载。

并不是jQuery不会在页面加载时执行，但可能 onload 事件永远不会被触发。

为了防止这种情况，您可以强制加载图像，在设置 onload 处理程序后将其放置：

// Force reloading if completed or if undetermined.
if (picture[0].complete !== false) {
  // 1x1 gif
  gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
  // Save original src, replace with the gif and reload the original src
  src = pic.src; pic.src = gif; pic.src = src
}

我希望这能解决你的问题，不要失去对断头台的信任;）

Answer 3

感谢回复的人，但我无法解决它。只要我在jQuery函数周围包装了任何函数，它内部的函数就会停止工作。我最终使用了Jcrop而不是Guillotine，并构建了一个可以在裁剪之前使用的旋转功能。现在一切都运转良好。

链接到Jcrop：http://deepliquid.com/content/Jcrop.html

jQuery没有在页面加载时执行

3 个答案: