Get x y w from a string?

Question

I have a string in javascript like :

"<div class="croppie-result" style="width: 584px; height: 584px;"><img src="screenshot.png" style="left: -391px; top: -92px;"></div>"

I want to extract or get values of left, top, width from this string in variables x,y,w.

x=391
y=92
w=584

How do I do this?

Note : Values of x and y are positive intentionally, not by mistake.

This is part of a task to crop the image or get a cropped image using croppie.

Here is the complete code :

var el = document.getElementById('resizer-demo');
var resize = new Croppie(el, {
  viewport: {
    width: 300,
    height: 300,
    type: 'square'
  },
  boundary: {
    width: 400,
    height: 400
  },
  showZoomer: true,
  enableResize: false,
  enableOrientation: true,
  mouseWheelZoom: 'ctrl'
});
resize.bind({
  url: '/home/shashanksingh/Pictures/Screenshot.png',
});

//on button click
function myFunction() {
  document.getElementById('msg').innerHTML = 'You clicked!';
  resize.result('html').then(function(data) {

    document.getElementById('msg').innerHTML = data.outerHTML;
    debugger
    // do something with cropped blob
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css" rel="stylesheet" />

<center>
  <div id='resizer-demo'></div>
  <button type="button" id='crop_it' onclick='myFunction()'>Crop</button>
  <div id='msg'>You can also use CTRL + mouse-wheel to zoom.</div>
  <br><br><br>
</center>

Open to suggestions I have to make a server request. I was thinking of sending these coordinates as I wasn't able to do anything else.

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

This is a very basic way for beginner.You can easily get by className of Div

1. get the div element by className.

2. get width using style.width.

3. get 'img' childElement from div element.

4. get style.left and style.top from 'img' childElement.

5. get Integer value using parseInt() and Math.abs() for positive value.

var y = document.getElementsByClassName('croppie-result')[0];
var widthValue= parseInt(y.style.width, 10);
var leftValue= Math.abs(parseInt(y.getElementsByTagName('img')[0].style.left, 10));
var topValue= Math.abs(parseInt(y.getElementsByTagName('img')[0].style.top,10));
console.log("w =", widthValue);
console.log("x =", leftValue);
console.log("y =", topValue);

<div class="croppie-result" style="width: 584px; height: 584px;"><img src="screenshot.png" style="left: -391px; top: -92px;"></div>