Untitled

<html>
  <head>
    <meta charset="UTF-8">

    <meta name="title" content="travelus">
    <meta name="description" content="edi-edi-travelus">
    <meta name="author" content="upisfree">
    <meta name="copyright" content="upisfree">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="icon" type="image/png" href="./favicon.png" sizes="32x32">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <title>yura-prostavlyayetza</title>

    <style>
.container {
  text-align: center;
}

.container img {
  display: inline-block;
}


.selection-container {
  position: absolute;
  top: 0;
  left: 0;
}

.selection-view {
  position: absolute;
  border: 3px solid rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.25);
}
   </style>
  </head>

  <body>
    <h1>yura-prostavlyayetza</h1>

    <div class="container">
      <img src="https://pp.userapi.com/c621126/v621126982/97f9/Md7037IVaAc.jpg">
      <img class="selection" src="https://pp.userapi.com/c621126/v621126982/97f9/Md7037IVaAc.jpg">
    </div>

    <script>
var Selection = {
  init: function() {
    var els = document.getElementsByClassName(this.baseClass);

    document.getElementsByTagName('body')[0].addEventListener('mouseup', this.mouseup.bind(this));

    for (var i = 0; i < els.length; i++) {
      els[i].addEventListener('mousedown', this.mousedown.bind(this));
      els[i].addEventListener('mousemove', this.mousemove.bind(this)); // TODO: переделать через requestAnimationFrame
    }

    this._selectionBlocksContainer = document.createElement('div');
    this._selectionBlocksContainer.className = this.containerClass;
    document.getElementsByTagName('body')[0].appendChild(this._selectionBlocksContainer);
  },
  // TODO: переделать через requestAnimationFrame
  // tick: function() {
  //   if (this._isMouseDown) {
  //     var s = this._selectionBlocks[this._selectionBlocks.length - 1];
  //     // s.style.width =
  //   }
  // },
  mousedown: function(e) {
    e.preventDefault();

    this._isMouseDown = true;

    var s = document.createElement('div');
    s.className = this.selectionViewClass;
    s.style.left = e.pageX;
    s.style.top = e.pageY;
    this._selectionBlocksContainer.appendChild(s);
    this._selectionBlocks.push(s);

    this._startX = e.pageX;
    this._startY = e.pageY;
  },
  mouseup: function(e) {
    this._isMouseDown = false;

    console.log('up!');
  },
  mousemove: function(e) {
    console.log(this._isMouseDown);

    if (this._isMouseDown) {
      var s = this._selectionBlocks[this._selectionBlocks.length - 1];
      s.style.width = e.pageX - this._startX;
      s.style.height = e.pageY - this._startY;
    }
  },

  // config
  baseClass: 'selection',
  multipleSelectionClass: 'multiple',
  selectionViewClass: 'selection-view',
  containerClass: 'selection-container',

  // tmp
  _isMouseDown: false,
  _startX: 0,
  _startY: 0,
  _selectionBlocks: [],
  _selectionBlocksContainer: null,
}

Selection.init();
    </script>
  </body>
</html>