Html图像裁剪+显示图像代码 [英] Html image crop + showing image code

问题描述

我正在开发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;背景：黑色; opacity：0.5;}＃bild_code {position：absolute; top：400px;}  

 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> < script src =// code.jquery.com/ui/111.4/jquery-ui.js\"> ;</script> ;<div id =container> < input type ='file'id =imgInp/> < div id =main> < img id =vorschausrc =＃alt =your image/> < div id =box>< / div> < / div> < div id =bild_code>< / div>< / div>  

这是我的基本想法。当您选择图片时，您会看到我想稍后上传的代码，但这不是问题。
当你移动黑盒，然后例如点击一个按钮，代码应该改变，这样我就可以上传裁剪图像代码。

希望你能帮忙。 / div>

看看这是否可行。我向页面添加了一个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 ）;}，}）; 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;背景：黑色; opacity：0.5;}＃bild_code {position：absolute; top：400px;}  

 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> < script src =// code.jquery.com/ui/111.4/jquery-ui.js\"> ;</script> ;<div id =container> < input type ='file'id =imgInp/> < div id =main> < img id =vorschausrc =＃alt =your image/> < div id =box>< / div> < / div> < div id =bild_code>< / div>< / div>< canvas id =canvaswidth =100height =100style =display：none;& / canvas>  

I am developing an Cordova mobile App. I want to add profile pictures, so i have to add a croping tool.

I created an example

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>

Thats my basic idea. When you chose an image you see the code, which i want to upload later, but thats not the problem. When you are moving the black box and then for example click on a button that code should change, so that i am able to upload the croped-image-code. Is there an easy solution?

Hope you can help ;)

解决方案

See if this works. I added a 100x100 (same size as the box) hidden canvas to the page. When you drag the box I take the top and left of the box and use context.drawImage using the box's position and using an area of 100x100, which crops the image where the box is and draws it inside the hidden canvas. Then I get the cropped image's source from the canvas using 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图像裁剪+显示图像代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！