-5

我在javascript中有一个字符串，例如：

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

我想从变量 , , 中的这个字符串中提取left或top获取,width的x值。yw

x=391
y=92
w=584

我该怎么做呢？

注意： x 和 y 的值是有意为正的，而不是错误的。

这是裁剪图像或使用croppie.

这是完整的代码：

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>

对我必须提出服务器请求的建议持开放态度。我正在考虑发送这些坐标，因为我无能为力。

4

3 回答 3

2

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

这是初学者非常基本的方法。您可以轻松className获得Div

  1. 通过类名获取 div 元素。

  2. 开始width使用style.width。

  3. 从元素中获取'img'childElement 。div

  4. 从childElement获取style.left和获取。style.top'img'

  5. Integer使用parseInt()和获取Math.abs()正值。

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>

于 2018-07-27T14:08:56.600 回答
1

如果您真的要使用 RegEx 路线，您需要进行 2 次单独的匹配，因为数据的顺序。但正如在NullPointer的回答和Tom Lord的建议中，通过 DOM 更加准确和首选。但我会为那些可能好奇的人提供一个解决方案。

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);

基本要点是使用标签名称作为样式值的上下文。可能应该在 RegEx 中添加“样式”，但为了示例，我只是想保持简单。

在此处输入图像描述 在此处输入图像描述

于 2018-07-27T14:18:20.757 回答
1

jQuery如果您有可用的，您也可以使用。

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);

假设您将 html 存储在 中data，您可以width简单地获取它。然后我们从嵌套<img>标签中获取位置数据来获取一个简单对象中的cssleft和top参数。最后，我们只解析该对象以提取图像偏移量的x和y值。

并且，将其与您所拥有的混合：

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>

于 2018-07-27T14:34:35.757 回答