Загрузка изображения в jCrop

Я использовал демонстрацию с 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. Кнопка «Загрузить», которая переходит в Jcrop. 2. Отправить кнопку изображения, чтобы перевернуть. 3. Отправить кнопку изображения в базу данных.


button database jquery jcrop image-uploading
person Funkypotato    schedule 28.03.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ну, наверное, уже поздно отвечать, но, надеюсь, это поможет другим в будущем задавать тот же вопрос. Итак, если вы хотите предоставить изображение в своем JCropper, вы можете выбрать 2 из этих вариантов.

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 Reader API, который еще не полностью поддерживается все браузеры, но, согласно 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 или другого. Надеюсь, это поможет.

person Airy    schedule 16.01.2014