Как исправить несколько файлов drag.js, открытых в новом окне - PullRequest
Новая
       14

Как исправить несколько файлов drag.js, открытых в новом окне

1 голос
/ 21 апреля 2019

Я не слишком хорош в настройке jQuery, и я внедряю fabric.js в моем текущем проекте. Я настроил код в соответствии с требованиями, используя fabric.js, и единственной проблемой, которой я не являюсь в состоянии понять, как исправить.

Проблема в том, что пользователь перетаскивает несколько файлов в открытое новое окно.

Вот мой код: 

var canvas = new fabric.Canvas('imageCanvas', {
  backgroundColor: 'rgb(240,240,240)'
});

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

var filedragDrop = document.getElementById('file_drag_drop');
filedragDrop.addEventListener('change', handleImage, false);

filedragDrop.addEventListener('dragenter', handleDragEnter, false);
filedragDrop.addEventListener('dragover', handleDragOver, false);
filedragDrop.addEventListener('dragleave', handleDragLeave, false);
filedragDrop.addEventListener('drop', handleDrop, false);

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var img = new Image();
    img.onload = function () {
      var imgInstance = new fabric.Image(img, {
        scaleX: 0.2,
        scaleY: 0.2
      })
      canvas.add(imgInstance);
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
  document.getElementById('canvas').style.backgroundColor = "";
  $("#file").val("");
  $("#file_drag_drop").val("");
  $(".canvas-text").hide();
  $("#canvas").css("z-index", "-1");
}
var selectedObject;

function addDeleteBtn(x, y) {
  var btnLeft = x;
  var btnTop = y;
  var deleteBtn = '<img src="https://img.icons8.com/cotton/2x/cancel--v1.png" class="deleteBtn" style="position:absolute;top:' + btnTop + 'px;right:' + btnLeft + 'px;cursor:pointer;width:20px;height:20px;"/>';
  $(".container").append(deleteBtn);
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
  //$("#file_drag_drop").val("");
  $("#canvas").val("");
  $("#file_drag_drop").css("z-index", "11111");
}

function handleDragOver(e) {
  // this / e.target is the current hover target.
  //$("#file_drag_drop").val("");
  $("#canvas").val("");
  $("#file_drag_drop").css("z-index", "11111");
}

function handleDragLeave(e) {
  // this / e.target is the current hover target.
  //$("#file_drag_drop").val("");
  $("#canvas").val("");
  $("#file_drag_drop").css("z-index", "11111");
}

function handleDrop(e) {
  // this / e.target is the current hover target.
  var filedragDrop = document.getElementById('file_drag_drop');
  filedragDrop.addEventListener('change', handleImage, false);
}

canvas.on('object:selected', function (event) {
  if (canvas.getActiveObject()) {
    $("#delete").css('display', 'block');
    $("#delete").css('top', event.target.oCoords.mt.x + 20);
    $("#delete").css('left', event.target.oCoords.mt.y + 20);
    $("#back-object").css('display', 'block');
    $("#back-object").css('top', event.target.oCoords.mt.x);
    $("#back-object").css('left', event.target.oCoords.mt.y + 20);
    $("#front-object").css('display', 'block');
    $("#front-object").css('top', event.target.oCoords.mt.x - 20);
    $("#front-object").css('left', event.target.oCoords.mt.y + 20);
    // addDeleteBtn(, event.target.oCoords.mt.y, event.target.width);
  }
  selectedObject = event.target;
});

canvas.on('mouse:down', function (e) {
  if (!canvas.getActiveObject()) {
    $("#delete").css('display', 'none');
    $("#back-object").css('display', 'none');
    $("#front-object").css('display', 'none');
  }
});

canvas.on('object:modified', function (event) {
  $("#delete").css('display', 'block');
  $("#delete").css('top', event.target.oCoords.mt.x + 20);
  $("#delete").css('left', event.target.oCoords.mt.y + 20);
  $("#back-object").css('display', 'block');
  $("#back-object").css('top', event.target.oCoords.mt.x);
  $("#back-object").css('left', event.target.oCoords.mt.y + 20);
  $("#front-object").css('display', 'block');
  $("#front-object").css('top', event.target.oCoords.mt.x - 20);
  $("#front-object").css('left', event.target.oCoords.mt.y + 20);

});

canvas.on('object:moving', function (e) {
  $("#delete").css('display', 'none');
  $("#back-object").css('display', 'none');
  $("#front-object").css('display', 'none');
});

var sendSelectedObjectBack = function () {
  canvas.sendToBack(selectedObject);
}

var sendSelectedObjectToFront = function () {
  canvas.bringToFront(selectedObject);
}

var deleteObject = function () {
  canvas.getActiveObject().remove();
  $("#delete").css('display', 'none');
  $("#back-object").css('display', 'none');
  $("#front-object").css('display', 'none');
  $("#imageLoader").val("");
}

var imageSaver = document.getElementById('imageSaver');
imageSaver.addEventListener('click', saveImage, false);

function saveImage(e) {
  this.href = canvas.toDataURL({
    format: 'png',
    quality: 0.8
  });
  this.download = 'test.png'
}
body {
  font-family: sans-serif;
}

#canvas [type="file"] {
  width: 400px;
  height: 400px;
  cursor: pointer;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#canvas {
  width: 400px;
  height: 400px;
  background: transparent;
  /*border: 3px solid black;*/
  overflow: hidden;
  position: relative;
  color: #fff;
  float: left;
}

div#container {
  padding: 30px;
  font-family: 'verdana', lucida;
}

input {
  background-color: #ccc;
  padding: 10px 20px;
  width: 360px;
  color: #777;
}

a {
  color: #777;
  display: block;
  background-color: #ccc;
  width: 360px;
  padding: 10px 20px;
  margin-top: 2px;
  text-decoration: none;
}

#delete {
  position: absolute;
  display: none;
  border: 1px solid black;
  background: green;
  color: white;
  padding: 3px 10px;
  border-radius: 5px;
  z-index: 1000;
  cursor: pointer;
}

#front-object {
  position: absolute;
  display: none;
  border: 1px solid black;
  background: green;
  color: white;
  padding: 3px 10px;
  border-radius: 5px;
  z-index: 1000;
  cursor: pointer;
}

#back-object {
  position: absolute;
  display: none;
  border: 1px solid black;
  background: green;
  color: white;
  padding: 3px 10px;
  border-radius: 5px;
  z-index: 1000;
  cursor: pointer;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div id="container">
  <input type="file" id="imageLoader" name="imageLoader" />
  <canvas id="imageCanvas" width="400" height="400"></canvas>
  <a id="imageSaver" href="#">Save image</a>
  <div id="canvas" style="background-color:#cccccc;position: absolute;top: 80px;left: 38px;">
    <div class="canvas-text text-center">
      <h2>Drag and Drop PNGs</h2>
      <p>or use the Uplod Art button</p>
    </div>
    <input type="file" name="file_drag_drop" id="file_drag_drop">
  </div>
</div>
<button onclick="sendSelectedObjectToFront()" id="front-object"> FRONT </button>
<button onclick="sendSelectedObjectBack()" id="back-object"> BACK </button>
<button onclick="deleteObject()" id="delete"> DELETE </button>

Есть идеи, как решить эту проблему в fabric.js?

...