What are Fabric.js tools for "Drop Zones"?

Question

What are Fabric.js tools for "Drop Zones"?

Has anyone successfully created a "drop zone" similar to interact.js using fabric.js?

I haven't had the chance to experiment with it myself. I have some ideas on how I could potentially implement it, but before diving in, I wanted to see if anyone else has done something similar. My Google searches so far haven't turned up anything useful.

*Note: I'd prefer not to add another library just for this specific functionality. While I know I could use interact.js, I'm hoping to avoid adding unnecessary dependencies if possible.

Answer:

For those seeking a solution... You could potentially achieve this using isContainedWithinObject(other, absoluteopt, calculateopt) → {Boolean} method in fabric.js. After going through the fabric.js documentation, I realized that drawing 9 rectangles (top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, and bottom right) and running the method on the appropriate objects might do the trick.

javascript fabricjs

Answer 1

Answer №1

If you want to create a dropzone using CSS and a classic input method, you can style it as shown in the snippet below.

var canvas = new fabric.Canvas('canvas');
canvas.setHeight(300);
canvas.setWidth(400);

document.querySelector("#pdf-upload").addEventListener("change", function(e) {
  var file = e.target.files[0]
  if (file.type == "image/jpeg" || "image/png") {
    var reader = new FileReader();
    reader.onload = function(event) {
      var data = event.target.result;
      fabric.Image.fromURL(data, function(image) {
        var imageObject = image;
        canvas.setBackgroundImage(imageObject);
        imageObject.scaleToHeight(300);
        canvas.renderAll();
      });
    };
    reader.readAsDataURL(file);
  };
  $("#canvas").css("visibility", "visible");
  $(".dz").css("visibility", "hidden");
});

.dz-text {
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  width: 200px;
  text-align: center;
}

.dz-button {
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  z-index: 3;
  margin-left: -150px;
  width: 300px;
  position: absolute;
  padding: 120px 0 0 0;
  height: 100px;
  overflow: hidden;
  border: dotted 5px black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 20px;
  background-size: 60px 60px;
  background-color: rgba(155, 105, 255, 0.2);
  background-clip: padding-box;
}

.dz-button:hover {
  background-color: rgba(155, 105, 255, 0.3);
}

#canvas {
  border: solid 1px black;
  z-index: 1;
  visibility: hidden;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
</head>

<body>
  <div class="dz">
    <div class="dz-text"><b>Drop image here</b></div>
    <input class="dz-button" id="pdf-upload" type="file">
  </div>

  <canvas id="canvas"></canvas>
</body>

</html>

Answer 2

If you want to create a dropzone using CSS and a classic input method, you can style it as shown in the snippet below.

var canvas = new fabric.Canvas('canvas');
canvas.setHeight(300);
canvas.setWidth(400);

document.querySelector("#pdf-upload").addEventListener("change", function(e) {
  var file = e.target.files[0]
  if (file.type == "image/jpeg" || "image/png") {
    var reader = new FileReader();
    reader.onload = function(event) {
      var data = event.target.result;
      fabric.Image.fromURL(data, function(image) {
        var imageObject = image;
        canvas.setBackgroundImage(imageObject);
        imageObject.scaleToHeight(300);
        canvas.renderAll();
      });
    };
    reader.readAsDataURL(file);
  };
  $("#canvas").css("visibility", "visible");
  $(".dz").css("visibility", "hidden");
});

.dz-text {
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  width: 200px;
  text-align: center;
}

.dz-button {
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  z-index: 3;
  margin-left: -150px;
  width: 300px;
  position: absolute;
  padding: 120px 0 0 0;
  height: 100px;
  overflow: hidden;
  border: dotted 5px black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 20px;
  background-size: 60px 60px;
  background-color: rgba(155, 105, 255, 0.2);
  background-clip: padding-box;
}

.dz-button:hover {
  background-color: rgba(155, 105, 255, 0.3);
}

#canvas {
  border: solid 1px black;
  z-index: 1;
  visibility: hidden;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
</head>

<body>
  <div class="dz">
    <div class="dz-text"><b>Drop image here</b></div>
    <input class="dz-button" id="pdf-upload" type="file">
  </div>

  <canvas id="canvas"></canvas>
</body>

</html>

What are Fabric.js tools for "Drop Zones"?

Answer:

Answer №1

Similar questions

What is the best way to create vertical spacing between Material UI Grid Paper components?

Confidently set up a proxy that is recursively nested and strongly typed

Unleash the power of a module by exposing it to the global Window object using the dynamic

The function signature '(_event: React.SyntheticEvent, value: number) => void' cannot be assigned to the type 'FormEventHandler<HTMLUListElement>'

JavaScript doesn't automatically redirect after receiving a response

Firebase Error: Trying to access properties of null object (indexOf)

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

The Ajax data was not displayed in the console log, instead an error message was returned stating "http://localhost/IFICSV3/public/sla/sla/getbranch/180 not found"

Using the NodeJS driver for MongoDB to Update Documents

The browser message states: Variable $? Not Found

Tips for swapping out a sticky element as you scroll

Automatically generated VueJS function

Utilizing AngularJS: Triggering a controller function from a directive

Display the user's input value in a tooltip without using jQuery

Switch between two PHP files with a toggle feature using jQuery click event

Tips on preventing flickering when using javascript for drag and drop functionality

subscribing to multiple observables, such as an observable being nested within another observable related to HTTP requests

Using Javascript, delete all chosen HTML elements containing innerText

What is the reason behind FieldSelect returning a string instead of an object like FieldCheckbox?

Why is the 3rd argument necessary when using useReducer?