Javascript JCrop用户选择的图像_Javascript_Jquery_Html_Image_Jcrop

Javascript JCrop用户选择的图像

javascript jquery html image

Javascript JCrop用户选择的图像,javascript,jquery,html,image,jcrop,Javascript,Jquery,Html,Image,Jcrop,我已经能够使用JCrop示例代码在图像上选择一个区域、显示所选区域的预览以及获取所选区域的坐标但我只能对预加载的图像执行此操作。我希望用户从其文件系统中选择一个图像，将其打开到浏览器，然后允许他/她执行上述操作我试图用一个简单的Javascript函数替换对图像的硬编码引用。Javascript代码本身的作用是允许用户选择图像并在浏览器中显示该图像但是，当我将它放在JQuery/JCrop代码中，用于选择要预览的图像区域时，它似乎不起作用以下是目前的完整代码： <!DOCTYPE

我已经能够使用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嵌入在标记中

这是一篇我认为试图解决同样问题的文章，但我完全不明白：

我听说有一个名为setImage的JCrop函数可以用于此目的。有人确切地知道如何使用它吗

如果您需要任何其他信息，请告诉我。谢谢。

我建议您使用图像填充数据库，加载时获取这些图像，制作对象的数组列表。从数据库中获取的字节[]将这些imigase转换为StreamedContent。然后将它们放在primeface数据表中。

我需要裁剪从文件系统中选择的图像，并预览裁剪。我想在前端做这个。是的，如果你想要一张图片列表，你打算把图片放在哪里？你需要一个地方来保存图像。