文章/答案/技术大牛

发布

问将图像上传到jCrop
EN

Stack Overflow用户

提问于 2013-03-28 16:08:09

回答 1查看 2.2K关注 0票数 0

我一直在使用来自http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail的演示来创建一个裁剪器，但是它没有将图片上传到它的功能。有人知道怎么做吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Upload Your Own Kiss</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<script type="text/javascript">
var previewW, previewH, previewL, previewT;
var imagefile;

  jQuery(function(){
      jGo(true);
  });

  function jGo(changing) {
      setMainImage();
    // 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]);

if (changing) {
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      //this.setImage(imagefile);
      var bounds = this.getBounds();
      console.log("Bounds",bounds);
      boundx = bounds[0];
      boundy = bounds[1];
      //boundx = xsize;
      //boundy = ysize;
      // 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);
    });
}
else {
    $pimg.css({
      width: previewW + 'px',
      height: previewH + 'px',
      marginLeft: '-' + previewL + 'px',
      marginTop: '-' + previewT + 'px',
    });     
}

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

    previewW = Math.round(rx * boundx);
    previewH = Math.round(ry * boundy);
    previewL = Math.round(rx * c.x);
    previewT = Math.round(ry * c.y);

    $pimg.css({
      width: previewW + 'px',
      height: previewH + 'px',
      marginLeft: '-' + previewL + 'px',
      marginTop: '-' + previewT + 'px',
    });
  }
};

  }

function showParams() {
alert ("Params are: " + ":" + previewW + ":" + previewH + ":" + previewL + ":" + previewT);
}

function sendParams() {
alert ("Params are: " + previewW + ":" + previewH + ":" + previewL + ":" + previewT);
 var request = $.ajax({
    type: 'POST',
    url: "save.php",
    success: function(response) {
        console.log((response=="ok")?"stored ok":"store error!");
    },
    failure: function() {
        console.log("ajax failure!");
    },
    data: "imgURL=" + escape(imagefile) + "&x=" + previewW + "&y=" + previewH + "&l=" + previewL + "&t=" + previewT
});
}

function setMainImage() {
var imgFolder = "demo_files/";
imagefile = imgFolder + parseQuery(querystring)["image"];
//$('#target-pane').innerHTML('<img src="'+imagefile+'" id="target" alt="[Jcrop Example]" />');
document.getElementById("target-pane").innerHTML='<img src="'+imagefile+'" id="target" alt="[Jcrop Example]" />';
document.getElementById("preview-pane").innerHTML='<div id="preview-div" class="preview-container"><img src="'+imagefile+'" class="jcrop-preview" alt="Preview" /></div>';
}

var querystring = window.location.search.substring(1);  // looks strange, but it works

function parseQuery(str) {  // from StackOverflow - parses query string
if(typeof str != "string" || str.length == 0) return {};
var s = str.split("&");
var s_length = s.length;
var bit, query = {}, first, second;
for(var i = 0; i < s_length; i++)
    {
    bit = s[i].split("=");
    first = decodeURIComponent(bit[0]);
    if(first.length == 0) continue;
    second = decodeURIComponent(bit[1]);
    if(typeof query[first] == "undefined") query[first] = second;
    else if(query[first] instanceof Array) query[first].push(second);
    else query[first] = [query[first], second]; 
    }
console.log("parseQuery: query is ", query);
return query;
}

</script>
</head>
<body>

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

<div class="page-header">
<h1 style=color: whitel>Upload your own kiss</h1>
</div>
<div id="target-pane">
MAIN IMAGE
</div>

  <div id="preview-pane">
<div id="preview-div" class="preview-container">
  Preview img goes here
</div>
  </div>

  <div>
  <input type="button" value="Done!" onclick="sendParams();" />
  </div>
  <div>
  <input type="text" id=paramsId />
  <input type="button" value="GetParams" onclick="getParams(getElementById('paramsId').value);" />
  </div>

  <div class="description">
  <p>
    <ul style=color:white;><b>Instructions</b>
    <li>Upload your image</li>
   <li> Crop it as close to your lips as possible (watch out for your nose!) </li>
   <li> Hit done when done!</li>
    </ul>
  </p>
  </div>
<div class="clearfix"></div>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

裁剪后，我希望它被发送到另一个函数，这样人们就可以在图像保存到数据库之前翻转它。

到目前为止我有这样的想法：

<body onLoad="setUp();">

<div id="imbox">
<div id="left"><img id="leftimg" src="" /></div>
<div id="right"><img id="rightimg" src="" /></div>
<div id="checks">
    <span id=boxlspan><input type="checkbox" id="boxleft" onchange='flipIt("left")'> Flip?</span>
    <span id=boxrspan>Flip? <input type="checkbox" id="boxright"  onchange='flipIt("right")'></span>
</div>
</div>

</body>

因此，简单地说: 1.上传按钮，去杰洛。2.发送图片按钮进行翻转。3.将图片按钮发送到数据库。

button

image-uploading

jcrop

jquery

database

回答 1

Stack Overflow用户

发布于 2014-01-16 22:38:32

好吧，现在回答可能已经晚了，但希望将来能帮助其他人问同样的问题。因此，如果您想在您的JCropper中提供一个图像，那么您可以使用其中的两个选项。

1)让用户选择图像并将其上传到服务器，获取路径，并在JCrop目标中提供如下所示的源

    $('#cropbox').attr('src','http://www.mysite.com/upload/abc.jpg');
$('#cropbox').Jcrop({
    aspectRatio: 1, //To keep aspect ratio
    boxWidth: 650, //To handle large images
    boxHeight: 400, //To handle large images
        onSelect: updateCoords 
},function()
{
    alert("Image has been added to JCrop.");
});

2)如果您想让用户选择一个图像，然后裁剪然后上传，那么您可以使用这段代码来完成，但是请记住，这段代码使用的是HTML5 File ，它还不是所有浏览器都完全支持的，但是根据caniuse.com，这个特性得到了目前87%的浏览器的支持，所以我建议使用这种方法。

<input type="file" id="uplPic" />

$(document).on('change', '#uplPic', function()
{
   if(window.FileReader)
   {
      var reader = new FileReader();
      reader.onload = function(e) 
      {
          $('#cropbox').attr('src',reader.result);
      $('#cropbox').Jcrop({
       aspectRatio: 1,
       boxWidth: 650,
       boxHeight: 400,
           onSelect: updateCoords 
      },function()
      {
       alert("Image has been added to JCrop.");
      });
       }
       reader.readAsDataURL(this.files[0]);  
    }
 });

我用JQuery做速记。现在，您可以获取尺寸，并将图像上传到服务器，然后使用PHP或其他文件进行裁剪。希望这能有所帮助。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15686734

复制

相似问题

问将图像上传到jCrop
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将图像上传到jCropEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将图像上传到jCrop
EN