Question

这用于上传，裁剪，剪切然后显示图片，但我想显示裁剪后的图像和裁剪图像的（x1，y1，），（x2，y2）坐标。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Cropper.js</title>
   <link rel="stylesheet" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css
">

  <style>

.page {
    margin: 1em auto;
    max-width: 768px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 100%;
}

.box {
    padding: 0.5em;
    width: 100%;
    margin:0.5em;
}

.box-2 {
    padding: 0.5em;
    width: calc(100%/2 - 1em);
}

.options label,
.options input{
    width:4em;
    padding:0.5em 1em;
}
.btn{
    background:white;
    color:black;
    border:1px solid black;
    padding: 0.5em 1em;
    text-decoration:none;
    margin:0.8em 0.3em;
    display:inline-block;
    cursor:pointer;
}

.hide {
    display: none;
}

img {
    max-width: 100%;
}
  </style>
</head>
<body>

  <div class="container">
    <h1>Cropper with a range of aspect ratio</h1>
    <div>
    <main class="page">
    <h2>Upload ,Crop and save.</h2>
    <!-- input file -->
    <div class="box">
        <input type="file" id="file-input">
    </div>
    <!-- leftbox -->
    <div class="box-2">
        <div class="result" id="image"></div>
    </div>
    <!--rightbox-->
    <div class="box-2 img-result hide">
        <form><img  alt="" class="cropped" src=""></form>

    </div>
    <!-- input file -->
    <div class="box">
        <div class="options hide">
            <label> Width</label>
            <input type="number" class="img-w" value="300" min="100" max="1200" />
        </div>
        <!-- save btn -->
        <button class="btn save hide" >Save</button>
        <!-- download btn -->

    </div>

</main>
    </div>
  </div><br><br><br><br><br>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js
"></script>
  <script>
   // vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';

// on change show image with crop options
upload.addEventListener('change', (e) => {
  if (e.target.files.length) {
        // start file reader
    const reader = new FileReader();
    reader.onload = (e)=> {
      if(e.target.result){
                // create new image
                let img = document.createElement('img');
                img.id = 'image';
                img.src = e.target.result
                // clean result before
                result.innerHTML = '';
                // append new image
        result.appendChild(img);
                // show save btn and options
                save.classList.remove('hide');
                options.classList.remove('hide');
                // init cropper
                cropper = new Cropper(img);
                //  cropped value

      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});

// save on click
save.addEventListener('click',(e)=>{
  e.preventDefault();
  // get result to data uri
  let imgSrc = cropper.getCroppedCanvas({
        width: img_w.value // input value
    }).toDataURL();
  // remove hide class of img
  cropped.classList.remove('hide');
  img_result.classList.remove('hide');
    // show image cropped
  cropped.src = imgSrc;
  dwn.classList.remove('hide');
  dwn.download = 'imagename.png';
  dwn.setAttribute('value',imgSrc);
});
  </script>

</body>
</html>

请有人帮帮我吗？如何找到裁剪图像的（x1，y1，），（x2，y2）坐标？我对此有一些了解：首先找到（x1，y1，）和裁剪图像的宽度和高度，然后x2 = x1 +宽度，y2 = y1 +宽度，但我不知道如何应用。请帮助我将其应用于Javascript或jQuery。

Answer 1

两个工作示例：绝对画布坐标和相对图像坐标：

// vars
let result = document.querySelector('.result'),
  img_result = document.querySelector('.img-result'),
  img_w = document.querySelector('.img-w'),
  img_h = document.querySelector('.img-h'),
  options = document.querySelector('.options'),
  save = document.querySelector('.save'),
  cropped = document.querySelector('.cropped'),
  dwn = document.querySelector('.download'),
  upload = document.querySelector('#file-input'),
  cropper = '';

// on change show image with crop options
upload.addEventListener('change', (e) => {
  if (e.target.files.length) {
    // start file reader
    const reader = new FileReader();
    reader.onload = (e) => {
      if (e.target.result) {
        // create new image
        let img = document.createElement('img');
        img.id = 'image';
        img.src = e.target.result
        // clean result before
        result.innerHTML = '';
        // append new image
        result.appendChild(img);
        // show save btn and options
        save.classList.remove('hide');
        options.classList.remove('hide');
        // init cropper
        cropper = new Cropper(img);
        //  cropped value
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});

// save on click
save.addEventListener('click', (e) => {
  let cropLeft = cropper.cropBoxData.left;
  let cropTop = cropper.cropBoxData.top;
  let cropRight = cropLeft + cropper.cropBoxData.width;
  let cropBottom = cropTop + cropper.cropBoxData.height;
  let info = "Crop region (absolute canvas coordinates):\n" + 
  	"(x1, y1) = (" + cropLeft + ", " + cropTop + ")\n" +
  	"(x2, y2) = (" + cropRight + ", " + cropBottom + ")\n";
  
  let zoom = cropper.image.offsetHeight / cropper.image.naturalHeight;
  let naturalWidth = (cropRight - cropLeft) / zoom;
  let naturalHeight = (cropBottom - cropTop) / zoom;
  
  let relativeLeft = (cropper.cropBoxData.left - cropper.canvasData.left);
  let relativeTop = (cropper.cropBoxData.top - cropper.canvasData.top);
  
  let naturalLeft = relativeLeft / zoom;
  let naturalTop = relativeTop / zoom;
  let naturalRight = naturalLeft + naturalWidth;
  let naturalBottom = naturalTop + naturalHeight;
  
  info += "\nCrop region (image coordinates):\n" + 
  	"(x1, y1) = (" + naturalLeft + ", " + naturalTop + ")\n" +
  	"(x2, y2) = (" + naturalRight + ", " + naturalBottom + ")\n";
  
  alert(info);
  
  e.preventDefault();
  // get result to data uri
  let croppedImg = cropper.getCroppedCanvas({
    width: img_w.value // input value
  });
  let imgSrc = croppedImg.toDataURL();
  // remove hide class of img
  cropped.classList.remove('hide');
  img_result.classList.remove('hide');
  // show image cropped
  cropped.src = imgSrc;
});

.page {
  margin: 1em auto;
  max-width: 768px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
}

.box {
  padding: 0.5em;
  width: 100%;
  margin: 0.5em;
}

.box-2 {
  padding: 0.5em;
  width: calc(100%/2 - 1em);
}

.options label,
.options input {
  width: 4em;
  padding: 0.5em 1em;
}

.btn {
  background: white;
  color: black;
  border: 1px solid black;
  padding: 0.5em 1em;
  text-decoration: none;
  margin: 0.8em 0.3em;
  display: inline-block;
  cursor: pointer;
}

.hide {
  display: none;
}

img {
  max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Cropper.js</title>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css
">
  </head>

  <body>

    <div class="container">
      <h1>Cropper with a range of aspect ratio</h1>
      <div>
        <main class="page">
          <h2>Upload ,Crop and save.</h2>
          <!-- input file -->
          <div class="box">
            <input type="file" id="file-input">
          </div>
          <!-- leftbox -->
          <div class="box-2">
            <div class="result" id="image"></div>
          </div>
          <!--rightbox-->
          <div class="box-2 img-result hide">
            <form><img alt="" class="cropped" src=""></form>

          </div>
          <!-- input file -->
          <div class="box">
            <div class="options hide">
              <label> Width</label>
              <input type="number" class="img-w" value="300" min="100" max="1200" />
            </div>
            <!-- save btn -->
            <button class="btn save hide">Save</button>
            <!-- download btn -->

          </div>

        </main>
      </div>
    </div><br><br><br><br><br>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js
"></script>

  </body>

</html>

如何显示弯曲图像的（x1，y1，）和（x2，y2）

1 个答案: