从字符串中获取 x y w?
Get x y w from a string?
我在 javascript 中有一个字符串,例如:
"<div class="croppie-result" style="width: 584px; height: 584px;"><img src="screenshot.png" style="left: -391px; top: -92px;"></div>"
我想从这个字符串中的变量 x
、y
、[=19 中提取或获取 left
、top
、width
的值=].
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>
接受建议我必须发出服务器请求。我正在考虑发送这些坐标,因为我无能为力。
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
这是一个非常基本的方法 beginner.You 可以很容易地通过 Div
的 className
通过 className 获取 div 元素。
使用style.width
得到width
。
从 div
元素获取 'img'
子元素。
从 'img'
子元素中获取 style.left
和 style.top
。
使用 parseInt()
和 Math.abs()
获取正值 Integer
值。
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>
您需要进行 2 次单独的匹配,因为如果您真的要使用 RegEx 路由,则数据的顺序。但正如 's answer AND 的建议,通过 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 中添加 "style",但我只是为了示例而尽量保持简单。
您也可以使用 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
pretty simply. Then we get the positional data from the nested <img>
tag to get the css left
and top
parameters。最后,我们只解析该对象以提取图像偏移的 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>
我在 javascript 中有一个字符串,例如:
"<div class="croppie-result" style="width: 584px; height: 584px;"><img src="screenshot.png" style="left: -391px; top: -92px;"></div>"
我想从这个字符串中的变量 x
、y
、[=19 中提取或获取 left
、top
、width
的值=].
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>
接受建议我必须发出服务器请求。我正在考虑发送这些坐标,因为我无能为力。
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
这是一个非常基本的方法 beginner.You 可以很容易地通过 Div
的 className
通过 className 获取 div 元素。
使用
style.width
得到width
。从
div
元素获取'img'
子元素。从
'img'
子元素中获取style.left
和style.top
。使用
parseInt()
和Math.abs()
获取正值Integer
值。
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>
您需要进行 2 次单独的匹配,因为如果您真的要使用 RegEx 路由,则数据的顺序。但正如
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 中添加 "style",但我只是为了示例而尽量保持简单。
您也可以使用 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
pretty simply. Then we get the positional data from the nested <img>
tag to get the css left
and top
parameters。最后,我们只解析该对象以提取图像偏移的 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>