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

Guide on implementing EdgesHelper with imported Collada model using three.js

Creating a background with image overlays in React: A step-by-step guide

Mongoose makes sure that duplicate rows are not repeated in the database

Leveraging anonymous functions within an IF statement in JavaScript

Generating div elements dynamically and applying styles

AngularJS textbox failing to recognize line breaks as expected

Is it possible to share data from one controller in a JS file to another JS file? (using AngularJS)

There are no markers or popups currently displayed on the map

Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

What could be the reason for the counter not being incremented when the button is clicked

What is the best way to navigate to a component that has been imported in Vue.js?

The Magic of jQuery Cross Site Fetch

I am getting a HTTP 405 error indicating that the method is not allowed, and it appears to

What causes addEventListener to not return a value?

When attempting to access http://localhost:3000/traceur in Angular 2 with the angular-in-memory-web-api, a 404 (Not Found) error

Is it accurate to consider all JavaScript code and variables as inherent properties of an execution context?

How can I restrict Material UI TextFields with input type = file to only allow pdf files?

Using checkboxes in an Express application

Deleting a specific row within a Material UI DataGrid in Reactjs: Tips and tricks

Issue encountered: Unable to locate module: Error - Unable to resolve '@cycle/run' with webpack version 2.2.1