NEW Image scale- Pixelate image PixelsToMeter

index.html

<button id="initializeFabricCanvas" class="large"><i class="icon-picture"></i> initializeFabricCanvas</button>
<button id="initializeFabricCanvasx" class="large"><i class="icon-picture"></i> placeTagIcon</button>
<button id="initializeFabricCanvasPixelsToMeter" class="large"><i class="icon-picture"></i>PixelsToMeter</button> Width: 750px Height: 500px Bit Depth:8
<button id="NewPixelsPerMeter" class="large"><i class="icon-picture"></i>NewPixelsPerMeter</button>
<br/>
<canvas id="c"  width="1825" height="1141"></canvas>
<!--<canvas id="canvas"></canvas>-->

new-image-scale-pixelate-image-pixelstometer.markdown

NEW Image scale- Pixelate image PixelsToMeter

A Pen by Prasad Thiriveedi on CodePen.

License.

script.js

const src1 =
  "https://www.pythonanywhere.com/user/vedh/files/home/vedh/mysite/Office.bmp"; //https://www.securecare.com/wp-content/uploads/2022/03/Screen-Shot-2022-01-04-at-2.05.24-PM.png';
window.initializeFabricCanvasx = () => {
  var canvas = new fabric.Canvas("c");

  // Load floor plan image
  fabric.Image.fromURL(src1, function (img) {
    img.scaleToWidth(800); // Scale the image to fit the canvas width
    canvas.add(img);
    canvas.sendToBack(img);

    // Example conversion: 1 meter = 50 pixels
    var metersToPixels = 50;

    // Place tag icons based on meter positions
    var devices = [
      {
        x: 2,
        y: 3,
        icon:
          "https://www.iconarchive.com/download/i126308/pictogrammers/material/mouse-bluetooth.512.png"
      },
      {
        x: 5,
        y: 1,
        icon:
          "https://www.iconarchive.com/download/i121119/pictogrammers/material-light/star.512.png"
      },
      {
        x: 3,
        y: 4,
        icon:
          "https://www.iconarchive.com/download/i120966/pictogrammers/material-light/diamond-stone.512.png"
      }
    ];

    devices.forEach((device) => {
      placeTagIcon(
        canvas,
        device.x * metersToPixels,
        device.y * metersToPixels,
        device.icon
      );
    });

    canvas.renderAll();
  });
};

function initializeFabricCanvasPixelsToMeter() {
  var canvas = new fabric.Canvas("c");
  // Conversion factors
  var metersToPixels = 50;
  var pixelsToMeters = 1 / metersToPixels;

  // Load floor plan image
  fabric.Image.fromURL(src1, function (img) {
    img.scaleToWidth(screen.width); // Scale the image to fit the canvas width
    canvas.add(img);
    canvas.sendToBack(img);
    const x = 88.9616;
    const y = 158.4006;
    // Example devices with positions in meters
    var devices = [
      {
        x: 2,
        y: 3,
        icon:
          "https://www.iconarchive.com/download/i126308/pictogrammers/material/mouse-bluetooth.512.png"
      },
      {
        x: 5,
        y: 1,
        icon:
          "https://www.iconarchive.com/download/i121119/pictogrammers/material-light/star.512.png"
      },
      {
        x: y,
        y: x,
        icon:
          "https://www.iconarchive.com/download/i120966/pictogrammers/material-light/diamond-stone.512.png"
      }
    ];

    devices.forEach((device) => {
      var xPixels = metersToPixels * device.x;
      var yPixels = metersToPixels * device.y;
      placeTagIcon(canvas, xPixels, yPixels, device.icon);
    });

    canvas.renderAll();
  });
}

function placeTagIcon(canvas, x, y, iconUrl) {
  fabric.Image.fromURL(iconUrl, function (img) {
    img.set({
      left: x,
      top: y,
      originX: "center",
      originY: "center",
      scaleX: 0.1,
      scaleY: 0.1
    });
    canvas.add(img);
  });
}

// Helper functions for conversions
function metersToPixels(meters) {
  return meters * 50;
}

function pixelsToMeters(pixels) {
  return pixels / 50;
}
$("#initializeFabricCanvasx").click(function () {
  initializeFabricCanvasx();
});
$("#initializeFabricCanvasPixelsToMeter").click(function () {
  initializeFabricCanvasPixelsToMeter();
});

$("#initializeFabricCanvas").click(function () {
  var canvas = new fabric.Canvas("c");
  // Load floor plan image
  //"http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Equus_quagga_%28Namutoni%2C_2012%29.jpg/1280px-Equus_quagga_%28Namutoni%2C_2012%29.jpg""https://www.securecare.com/wp-content/uploads/2022/03/Screen-Shot-2022-01-04-at-2.05.24-PM.png"
  fabric.Image.fromURL(src1, function (img) {
    canvas.add(img);
    canvas.renderAll();
    // Pixelate the image
    pixelateImage(img, 10); // Adjust the pixelSize as needed
    canvas.renderAll();
  });
});
/*
Let's assume your floor plan image represents an area of 20 meters by 10 meters, and the image dimensions are 2000 pixels by 1000 pixels.

Real-world width: 20 meters
Real-world height: 10 meters
Image width: 2000 pixels
Image height: 1000 pixels
Pixels per meter (ppm):

ppm_width = image_width / real_world_width
ppm_height = image_height / real_world_height
For this example:

ppm_width = 2000 pixels / 20 meters = 100 pixels per meter
ppm_height = 1000 pixels / 10 meters = 100 pixels per meter
*/
var imgWidth = 0;
var imgHeight = 0;
var sWidth = screen.width;
var sHeight = screen.height;
var ppm_width = 0;
var ppm_height;
var ppm_width = 0; // = 2000 pixels / 20 meters = 100 pixels per meter
var ppm_height = 0; // = 1000 pixels / 10 meters = 100 pixels per meter
function pixelateImage(image, pixelSize) {
  imgWidth = image.width;
  imgHeight = image.height;
  console.log(
    "iw:",
    imgWidth,
    "screen width:",
    sWidth,
    "ih:",
    imgHeight,
    "sHeight: ",
    sHeight
  );
  var ctx = image.canvas.getContext("2d");
  ctx.imageSmoothingEnabled = false;
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;
  ctx.msImageSmoothingEnabled = false;

  ctx.drawImage(
    image._element,
    0,
    0,
    imgWidth,
    imgHeight,
    0,
    0,
    imgWidth / pixelSize,
    imgHeight / pixelSize
  );
  ctx.drawImage(
    image._element,
    0,
    0,
    imgWidth / pixelSize,
    imgHeight / pixelSize,
    0,
    0,
    imgWidth,
    imgHeight
  );

  //Pixels per meter (ppm):

  ppm_width = imgWidth / sWidth;
  ppm_height = imgHeight / sHeight;
  console.log("ppm => width:", ppm_width, " height:", ppm_height);
  //For this example:
  //ppm_width = 2000 pixels / 20 meters = 100 pixels per meter
  //ppm_height = 1000 pixels / 10 meters = 100 pixels per meter
}

var w = 1825,
  h = 1141,
  src =
    "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Equus_quagga_%28Namutoni%2C_2012%29.jpg/1280px-Equus_quagga_%28Namutoni%2C_2012%29.jpg";
//src="https://www.securecare.com/wp-content/uploads/2022/03/Screen-Shot-2022-01-04-at-2.05.24-PM.png";
var canvas = new fabric.Canvas("c");

//canvas.width = w/2;
//canvas.height = w/2;
//ctx.drawImage(img, 0, 0, w/6, h/6);
canvas.backgroundColor = "#FFFFFF";
var imag = new Image();
imag.crossOrigin = "anonymous";

function NewPixelsPerMeter() {
  //canvas = new fabric.Canvas("c");
  canvas.setHeight(window.screen.height);
  canvas.setWidth(window.screen.width);
  // Load floor plan image
  fabric.Image.fromURL(src1, function (img) {
    img.scaleToWidth(screen.width); // Scale the image to fit the canvas width
    img.scaleToHeight(screen.height);
    canvas.add(img);
    canvas.sendToBack(img);

    // Real-world dimensions of the floor plan
    var realWorldWidth = 20; // meters
    var realWorldHeight = 10; // meters

    // Get image dimensions
    var imageWidth = img.getOriginalSize().width;
    var imageHeight = img.getOriginalSize().height;

    // Calculate pixels per meter
    var ppmWidth = imageWidth / realWorldWidth;
    var ppmHeight = imageHeight / realWorldHeight;

    // Log the calculated pixels per meter
    console.log(
      `Pixels per meter (Width): ${ppmWidth}  Screen.Width: ${screen.width}`
    );
    console.log(
      `Pixels per meter (Height): ${ppmHeight} Screen.Height: ${screen.height}`
    );

    // Example devices with positions in meters
    //88.9616 ty:158.4006
    //13.99 20.12
    var devices = [
      {
        x: 8,
        y: 15,
        radius: 0.5,
        icon:
          "https://www.iconarchive.com/download/i125504/pictogrammers/material/headphones-bluetooth.512.png",
        tooltip: "Device 1"
      },
      {
        x: 13.99,
        y: 20.12,
        radius: 0.75,
        icon:
          "https://www.iconarchive.com/download/i126308/pictogrammers/material/mouse-bluetooth.512.png",
        tooltip: "Device 2"
      },
      {
        x: 12.7, y:13.21,
        radius: 0.6,
        icon:
          "https://www.iconarchive.com/download/i121119/pictogrammers/material-light/star.512.png",
        tooltip: "Device 3"
      },
      {
        x: 12.8,
        y: 13.56,
        radius: 0.85,
        icon:
          "https://www.iconarchive.com/download/i120966/pictogrammers/material-light/diamond-stone.512.png",
        tooltip: "Device 4"
      },{x:11.99,y:13.45, radius: 0.25, icon: "https://www.iconarchive.com/download/i134128/github/octicons/tag-24.256.png", tooltip: "Tag 5"}
      ,{x:14.5,y:13.25, radius: 0.25, icon: "https://www.iconarchive.com/download/i134138/github/octicons/thumbsdown-16.128.png", tooltip: "Tag 6"}
    ];
    devices.forEach((device) => {
      var xPixels = ppmWidth * device.x;
      var yPixels = ppmHeight * device.y;
      var radiusPixels = ppmWidth * device.radius; // Assuming uniform scaling
      placeTagIcon1(
        canvas,
        xPixels,
        yPixels,
        radiusPixels,
        device.icon,
        device.tooltip
      );
    });

    canvas.renderAll();
  });
  // console.log('metersToPixels1:', metersToPixels1())
}
function placeTagIcon1(canvas, x, y, radius, iconUrl, tooltip) {
  fabric.Image.fromURL(iconUrl, function (img) {
    img.set({
      left: x,
      top: y,
      originX: "center",
      originY: "center",
      scaleX: 0.1,
      scaleY: 0.1,
      selectable: false
    });

    // Add a tooltip
    img.on("mouseover", function () {
      var tooltipDiv = document.createElement("div");
      tooltipDiv.id = "tooltip";
      tooltipDiv.innerHTML = tooltip;
      tooltipDiv.style.position = "absolute";
      tooltipDiv.style.backgroundColor = "white";
      tooltipDiv.style.border = "1px solid black";
      tooltipDiv.style.padding = "5px";
      tooltipDiv.style.left = x + "px";
      tooltipDiv.style.top = y + "px";
      document.body.appendChild(tooltipDiv);
      console.log("mouseover");
    });

    img.on("mouseout", function () {
      var tooltipDiv = document.getElementById("tooltip");
      console.log("mouseout", tooltipDiv);
      if (tooltipDiv) {
        document.body.removeChild(tooltipDiv);
      }
    });
    canvas.add(img);
    // Draw a circle with the specified radius
    var circle = new fabric.Circle({
      radius: radius,
      left: x,
      top: y,
      fill: "red",
      originX: "center",
      originY: "center",
      opacity: 0.25,
      stroke: "lightgreen",
      strokeWidth: 4,
      selectable: false
    });
    canvas.add(circle);
  });
}

// Helper functions for conversions
function metersToPixels1(meters, ppm) {
  return meters * ppm;
}
function pixelsToMeters1(pixels, ppm) {
  return pixels / ppm;
}

//initializeFabricCanvasPixelsToMeter();
// NewPixelsPerMeter();
$("#NewPixelsPerMeter").click(function () {
  NewPixelsPerMeter();
});

scripts

<script src="https://unpkg.com/fabric@latest/dist/fabric.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

canvas {
    border-width: 1pz;
    border-style: solid;
    border-color: #000;
}