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>

Answer 2

You'll need to do 2 separate matches, because of the order of the data if you were to really go for the RegEx route. But as in NullPointer's answer AND Tom Lord's suggestion, going through the DOM is more accurate and preferred. But I'll provide a solution to those that may be curious.

var str = '<div class="croppie-result" style="width: 584px; height: 584px;"><img src="screenshot.png" style="left: -391px; top: -92px;"></div>'
var res = str.match(/div[^>]+width: *(-?\d+).*<img[^>]+top: *(-?\d+)/)
var w = parseInt(res[1]),
    y = parseInt(res[2]),
    x = parseInt(str.match(/<img[^>]+left: *(-?\d+)/)[1])

console.log("w =", w);
console.log("x =", x);
console.log("y =", y);

The basic gist is using the tag name as context for the style values. Should probably add "style" within the RegEx, but I'm just trying to keep it simple for the sake of the example.

Answer 3

You can also use jQuery if you have that available to you.

var w = $(data).width(),
    pos = $('img', data).css(['left', 'top']),
    x = parseInt(pos.left),
    y = parseInt(pos.top);

console.log("w =", w);
console.log("x =", x);
console.log("y =", y);

Assuming you have your html stored in data, you can grab the width pretty simply. Then we get the positional data from the nested <img> tag to get the css left and top parameters in a simple object. Finally, we just parse that object to extract the x and y values for your image offset.

And, to mix it in with what you have:

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;
    var w = $(data).width(),
        pos = $('img', data).css(['left', 'top']),
        x = parseInt(pos.left),
        y = parseInt(pos.top);

    console.log("w =", w);
    console.log("x =", x);
    console.log("y =", y);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>