Question

我正在开发Cordova移动应用程序。我想添加个人资料图片，所以我必须添加一个裁剪工具。

我创建了一个例子

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#vorschau').attr('src', e.target.result);
      $('#bild_code').html(e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

$('#box').draggable({
  containment: '#main'
});

body {
  margin: 0px;
  padding: 0px;
}

#main {
  position: absolute;
  top: 30px;
  min-height: 100px;
  min-width: 100px;
}

#box {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background: black;
  opacity: 0.5;
}

#bild_code {
  position: absolute;
  top: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="container">
  <input type='file' id="imgInp" />
  <div id="main">
    <img id="vorschau" src="#" alt="your image" />
    <div id="box"></div>
  </div>

  <div id="bild_code"></div>
</div>

这就是我的基本想法。当您选择图像时，您会看到我想稍后上传的代码，但这不是问题所在。当您移动黑匣子然后例如单击代码应该更改的按钮，以便我能够上传croped-image代码。有一个简单的解决方案吗？

希望你能提供帮助;）

Answer 1

我建议你看看https://github.com/RubaXa/jquery.fileapi/。即使插件本身不再更新，它的底层代码（https://github.com/mailru/FileAPI/）也是。

示例“userpic + crop”here似乎正是您所要求的。

Answer 2

看看这是否有效。我在页面上添加了一个100x100（与盒子大小相同）的隐藏画布。当你拖动框时，我会在框的顶部和左边使用context.drawImage，使用框的位置并使用100x100的区域，将图像裁剪到框中，并将其绘制在隐藏的画布中。然后我使用toDataUrl()

从画布中获取裁剪后的图像源

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#vorschau').attr('src', e.target.result);
      $('#bild_code').html(e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

$('#box').draggable({
  containment: '#main'
  ,drag: function() {
    crop();
  },
});

function crop(){
    var crop_canvas = document.getElementById('canvas');
    var left = $('#box').position().left;
    var top = $('#box').position().top;

    crop_canvas.getContext('2d').drawImage($('#vorschau')[0], left, top, 100, 100, 0, 0, 100, 100);
    $('#bild_code').html(crop_canvas.toDataURL());
}

body {
  margin: 0px;
  padding: 0px;
}

#main {
  position: absolute;
  top: 30px;
  min-height: 100px;
  min-width: 100px;
}

#box {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background: black;
  opacity: 0.5;
}

#bild_code {
  position: absolute;
  top: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="container">
  <input type='file' id="imgInp" />
  <div id="main">
    <img id="vorschau" src="#" alt="your image" />
    <div id="box"></div>
  </div>

  <div id="bild_code"></div>
</div>

<canvas id="canvas" width="100" height="100" style="display:none;"></canvas>

Html图像裁剪+显示图像代码

2 个答案: