Question

我已经能够使用JCrop示例代码来选择图像上的区域，显示所选区域的预览，并获取所选区域的坐标。

但我只能为预先加载的图像执行此操作。我希望用户从他的文件系统中选择一个图像，将其提交给浏览器，然后允许他/她执行上述操作。

我尝试用简单的Javascript函数将硬编码引用替换为图像。 Javascript代码本身可以简单地允许用户选择图像并在浏览器中显示该图像。

但是当我在用于选择要预览的图像区域的JQuery / JCrop代码中时，它似乎不起作用。

以下是现在的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<script type="text/javascript">
  jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();

    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },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;

      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });

    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.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' 
        });
      }

      $('#x1').val(c.x);
      $('#y1').val(c.y);
      $('#x2').val(c.x2);
      $('#y2').val(c.y2);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };

  });
</script>

<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 75px;
  right: -270px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 170px;
  height: 170px;
  overflow: hidden;
}

</style>

</head>
<body>

<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">

<div class="page-header">
<h1>Aspect Ratio with Preview Pane</h1>
</div>

  <input type = "file"  id = "src" />
  <img id="target" alt="[Jcrop Example]" />

  <div id="preview-pane">
    <div class="preview-container">
      <img id="target_preview" class="jcrop-preview" alt="Preview" />
    </div>
  </div>

  <script>
    function showImage(src,target,target_preview) {
            var fr=new FileReader();
            // when image is loaded, set the src of the image where you want to display it
            fr.onload = function(e) { 
                   target.src = this.result;
                   target_preview.src = this.result 
            };
            src.addEventListener("change",function() {
                // fill fr with image data    
                fr.readAsDataURL(src.files[0]);
            });
    }

    var src = document.getElementById("src");
    var target = document.getElementById("target");
    var target_preview = document.getElementById("target_preview");
    showImage(src,target,target_preview);

  </script> 

  <!-- This is the form that our event handler fills -->
  <form id="coords"
    class="coords"
    onsubmit="return false;"
    action="http://example.com/post.php">

    <div class="inline-labels">
    <label style="display: none">X1 <input type="text" size="4" id="x1" name="x1"/></label>
    <label style="display: none">Y1 <input type="text" size="4" id="y1" name="y1"/></label>
    <label style="display: none">X2 <input type="text" size="4" id="x2" name="x2"/></label>
    <label style="display: none">Y2 <input type="text" size="4" id="y2" name="y2"/></label>
    <label style="display: none">W <input type="text" size="4" id="w" name="w"/></label>
    <label style="display: none">H <input type="text" size="4" id="h" name="h"/></label>
    </div>
  </form>



<div class="clearfix"></div>

</div>
</div>
</div>
</div>

</body>
</html>

与此任务相关的Javascript嵌入在代码中。

这是一篇SO帖子，我认为它试图解决同样的事情，但我根本不理解：Input file show live selected image in JCrop

我听说过一个名为＆＃34; setImage＆＃34;的JCrop函数。可以用于此目的。有谁知道如何使用它？

如果您需要任何其他信息，请与我们联系。谢谢。

Answer 1

我建议你用图像填充db，在加载时获取那些图像，制作一个对象的数组列表。将这些imigase转换为您从db获得的byte []中的StreamedContent。并将它们放在主要数据表中。

JCrop用户选择的图像

1 个答案: