公司基于electron开发的IM应用中，实现了截图功能，最近被QA爆出在高分屏并且设置过系统缩放的笔记本上截图时内容出现了错位，并且截出来的图片会出现较大的偏差
高分屏一般都会在系统中设置缩放，比如在win10下，设置系统的缩放比例为 125%，这样不至于看上去界面字体啥的太小
解决办法呢，就是设置electron中webFrame的zoomFactor
网上有一些解决方案，实现的代码如下：
var devInnerHeight = 1080.0 // 开发时的InnerHeight
var devDevicePixelRatio = 1.0// 开发时的devicepixelratio
var devScaleFactor = 1.3 // 开发时的ScaleFactor
var scaleFactor = require('electron').screen.getPrimaryDisplay().scaleFactor
var zoomFactor = (window.innerHeight / devInnerHeight) * (window.devicePixelRatio / devDevicePixelRatio) * (devScaleFactor / scaleFactor)
require('electron').webFrame.setZoomFactor(zoomFactor)
这种方法并没有解决我的问题，可能是程序中HardCode比较多吧，导致总会有一些误差
这个计算出来的zoomFactor值接近1.0，而获取到系统的zoomFactor值为1.25，因为我在win10中设置的缩放比例为125%
let defaultZoomFactor = require('electron').webFrame.getZoomFactor();
console.log(defaultZoomFactor); // defaultZoomFactor = 1.25
既然在缩放率为1.25情况下导致界面元素出现了偏差，那我就将缩放率还原好了，改为1.0，原始的缩放比例，这样的话，界面元素便不会进行缩放，保持原来的大小
require('electron').webFrame.setZoomFactor(1.0);
设置后，界面上就没什么问题了，裁剪图片时的边框也出现在了正确的位置，但是保存下来的图片又出现了问题，zoomFactor只设置了显示时的缩放比例，如果将图片进行保存的话，还得重新设置缩放后的图片的宽高，代码如下：
// 设置界面的缩放比例为1.0，跟系统保持一致
require('electron').webFrame.setZoomFactor(1.0);
// 获取系统的缩放比例
var scaleFactor = require('electron').screen.getPrimaryDisplay().scaleFactor;
...
// 获取到的裁剪区域的位置值，都需要和scaleFactor相乘，这样才能计算出截图区域的准确位置信息
// 裁剪区域的宽度
let w = parseInt(cropDiv.style.width) * scaleFactor;
// 裁剪区域的高度
let h = parseInt(cropDiv.style.height) * scaleFactor;
// 裁剪区域的top
let top = parseInt(cropDiv.style.top) * scaleFactor;
// 裁剪区域的left
let left = parseInt(cropDiv.style.left) * scaleFactor;
重新设置裁剪区域的位置值以后，保存的图片也就正常了。
网友评论