如何获取选中画布图片的宽高？能否通过裁剪边界值计算？

当然可以通过这些边界值计算出图片的高度和宽度，同时也有对应的属性可以直接获取尺寸，下面分两部分说明：

一、手动计算宽高 #

• 宽度：直接用右侧边界值减去左侧边界值即可：
  width = right - left = 508 - 51 = 457
• 高度：这里需要注意坐标系的方向——你给出的top值（676）比bottom值（477）大，说明你的坐标系是y轴向上（原点在左下角），这种情况下高度就是top减去bottom：
  height = top - bottom = 676 - 477 = 199
  如果是常见的y轴向下的坐标系（比如HTML5 Canvas），高度则是bottom - top，本质都是取垂直方向两个边界的差值。

二、直接获取尺寸的属性 #

如果你是在使用HTML5 Canvas进行操作，当你通过getImageData()获取裁剪区域时，返回的ImageData对象自带width和height属性，无需手动计算：

const ctx = document.getElementById('yourCanvas').getContext('2d');
// 传入裁剪的起始坐标和宽高（这里宽高就是我们计算出的457和199）
const croppedImageData = ctx.getImageData(51, 477, 457, 199);
console.log('裁剪后宽度:', croppedImageData.width);
console.log('裁剪后高度:', croppedImageData.height);

如果是处理DOM中的图片元素，还可以通过以下属性直接获取：

• naturalWidth/naturalHeight：获取图片的原始尺寸
• offsetWidth/offsetHeight：获取图片在页面中的显示尺寸（包含边框等样式影响）

内容的提问来源于stack exchange，提问作者Smit Patel