如何通过JS获取Chrome浏览器触摸板/滚轮缩放的缩放级别

核心方法：利用window.visualViewport.scale #

Chrome中触摸板/滚轮触发的捏合缩放（pinch-to-zoom）属于视觉视口缩放，和内置标签页缩放（Command+/-触发、chrome.tabs.getZoom()获取的）是独立机制。你可以通过window.visualViewport.scale直接获取这个缩放级别，它返回视觉视口相对于布局视口的缩放比例，完全匹配触摸板/滚轮的缩放操作。

// 获取当前触摸板/滚轮缩放级别
const pinchZoomLevel = window.visualViewport.scale;
console.log('捏合缩放级别:', pinchZoomLevel);

解决Canvas裁剪位置偏差问题 #

缩放后，基于视觉视口的坐标（比如鼠标点击的clientX/clientY）和页面布局坐标不匹配，会导致裁剪偏差。你需要将视觉视口坐标转换为布局视口坐标：

1. 获取视觉视口实例
2. 将视觉坐标除以缩放级别，得到布局视口下的对应坐标
3. 用转换后的坐标进行Canvas裁剪

示例代码：

// 假设已获取视觉视口下的裁剪区域：{x, y, width, height}
const visualArea = { x: 100, y: 100, width: 200, height: 200 };
const viewport = window.visualViewport;

// 转换为布局视口坐标
const layoutArea = {
  x: visualArea.x / viewport.scale,
  y: visualArea.y / viewport.scale,
  width: visualArea.width / viewport.scale,
  height: visualArea.height / viewport.scale
};

// 执行Canvas裁剪（screenshotImage为标签页截图）
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = visualArea.width;
canvas.height = visualArea.height;
ctx.drawImage(
  screenshotImage,
  layoutArea.x, layoutArea.y, layoutArea.width, layoutArea.height,
  0, 0, canvas.width, canvas.height
);

额外注意事项 #

• 实时监听缩放变化：通过visualViewport.addEventListener('resize', () => { ... })可以在用户缩放时实时更新缩放级别
• 区分内置缩放与捏合缩放：如果页面同时存在两种缩放，总缩放比例为visualViewport.scale * (await chrome.tabs.getZoom(tabId))。若仅需捏合缩放级别，可通过visualViewport.scale / (await chrome.tabs.getZoom(tabId))计算分离（chrome.tabs.getZoom为异步API，需在扩展环境中调用）

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