图片上传不显示图片（断头台裁剪）

Posted 2023-02-25

【中文标题】图片上传不显示图片（断头台裁剪）

【英文标题】：Image upload not showing image (Guillotine Crop)

【发布时间】：2015-06-30 18:43:47

【问题描述】：

我有一个简单的图片上传到页面index.php上的iframe：

<form ...action="up.php">
<input type="file" value="" name="file" id="file"> 
<iframe style="" id="upload_target" name="upload_target"</iframe>
</form>

图片是通过up.php使用PHP上传的：

<?php
...
move_uploaded_file($tmp_name, "$path");
...
list($test_width, $test_height) = getimagesize($path); 
?>

现在我想在iframe 中显示图像并允许使用guillotine 进行裁剪（仍然是up.php）：

<?php
if($test_width>0) 
?>

<div id="theparent" style="width: 100%;border:0px solid #000;">
  <img id='tempImage2' src='<?php echo $path;?>'>
</div>

直到这里它工作，但guillotine 现在做了一些导致图像不显示的事情。下一部分来自Guillotine Crop：

<div id='controls'>
  <button id='zoom_out'     type='button' title='Zoom out'> - </button>
  <button id='fit'          type='button' title='Fit image'> [ ]  </button>
  <button id='zoom_in'      type='button' title='Zoom in'> + </button>
</div>

<div style="display:none">
  <ul id='data'>
    <div class='column'>
      <span id='x'></span>
    </div>
    <div class='column'>
      <li>width:  <span id='w'></span>
      <li>height: <span id='h'></span>
    </div>
    <div class='column'>
      <li>scale: <span id='scale'></span>
      <li>angle: <span id='angle'></span>
    </div>
  </ul>
</div>
</div>

<script src='http://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='../../jCrop/js/jquery.guillotine.js'></script>
<script type='text/javascript'>
jQuery(function() 
  var picture = $('#tempImage2');
  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'); );

    // 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]); 
    );
  );
);

var otherPicture = $('#tempImage2');
otherPicture.guillotine(eventOnChange: 'guillotinechange');
otherPicture.on('guillotinechange', function(ev, data, action)
);

</script>

<?php

?>

当我重新加载iframe 时，会显示图像。这让我相信当它想显示图像时没有加载它？但我认为 PHP 先加载，当文件存在时加载 JavaScript ($test_width>0)。

【问题讨论】：

似乎它只不适用于谷歌浏览器

【参考方案1】：

您的代码中有一些奇怪的地方，您为同一个图像实例化了两次插件。 picture 和 otherPicture 实际上是同一个 DOM 元素。这肯定是问题的根源之一。

除了第一个实例的代码似乎正确之外，正确地包装在图片onload 事件的回调中。请注意，如果图像在您绑定到 onload 事件（例如缓存的图像）之前完成加载，则不会执行回调。

此外，为避免 iframe 出现复杂情况，您可能需要使用 Bifrost 之类的内容。它扩展了 jQuery 的 ajax 以在不支持 HTML5 功能且没有 Flash 时异步上传文件。

在后台它为您创建并处理一个iframe，所以本质上它是相同的，但是这样您可以将断头台保留在您的主框架中，而不是在 iframe 内。

希望对你有帮助。

【讨论】：

谢谢，问题确实很奇怪。