likaia / js-screen-shot

web端自定义截图插件(原生JS版)
https://www.kaisir.cn/js-screen-shot/
MIT License
808 stars 107 forks source link

针对浏览器120的问题我搜索到一个解决方案大佬你看看有用不 #155

Closed gaoyia closed 6 months ago

gaoyia commented 6 months ago

Version of js-screen-shot

1.9.9

Operating system and its version

MacOS

Browser and its version

electron

Sandbox to reproduce

No response

What happened?

// 获取缩放倍数(1*系统缩放倍数*浏览器缩放倍数)
function getZoom() {
  let zoom = 1;
  const screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

  if (window.devicePixelRatio !== undefined) {
    zoom = window.devicePixelRatio;
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      zoom = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    zoom = window.outerWidth / window.innerWidth;
  }
  return getDecimal(zoom);
}

const getDecimal = (num) => {
  return Math.round(num * 100) / 100;
};

function getAllZoom() {
  // 总缩放倍数
  const zoom = getZoom();
  // 屏幕分辨率
  const screenResolution = window.screen.width;
  // 获取浏览器内部宽度
  const browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  // 浏览器缩放倍数
  // 浏览器外部宽度不受浏览器缩放影响,浏览器内部宽度受影响,所以根据这个可以计算出浏览器缩放倍数(F12调试工具的占位会影响该值)
  const browserZoom = getDecimal(window.outerWidth / browserWidth);
  // 系统缩放倍数
  const systemZoom = getDecimal(zoom / browserZoom);
  // 系统分辨率
  const systemResolution = Math.round(screenResolution * systemZoom);

  console.log('系统分辨率', systemResolution, '屏幕分辨率', screenResolution, '浏览器外部宽度', window.outerWidth, '浏览器内部宽度', browserWidth, '总缩放倍数', zoom, '浏览器缩放倍数', browserZoom, '系统缩放倍数', systemZoom);

  return {
    zoom,
    browserZoom,
    systemZoom,
    systemResolution
  }
}

getAllZoom();

// 我是苹果电脑

screen.height * 2.74 * 0.73
// 1964.1964000000003
screen.width * 2.74 * 0.73
//  3024.3024
// 结果刚好是我显示器的宽高

报错信息

No response

likaia commented 6 months ago

Hello @gaoyia. Your feedback has been received, and you will be notified in the issue area when the problem is resolved. 你好 @gaoyia,已收到你反馈的问题,问题解决后将在issue区域通知你。