Fatal编程技术网
  • javascript/
  • Javascript Electron无法绘制全分辨率矩形

Javascript Electron无法绘制全分辨率矩形

javascript html css node.js electron

Javascript Electron无法绘制全分辨率矩形,javascript,html,css,node.js,electron,Javascript,Html,Css,Node.js,Electron,不知何故，我无法以全屏分辨率绘制矩形，从左到上始终有5px，如果我尝试在这些边界上移动光标，矩形绘制将停止，因为cusror更改为默认值，这意味着我在某个不可见的对象上，我怀疑这是窗口边界或其他东西 图中显示，我画的红框无法覆盖窗口边界，我在左上角用黑线标记了它们 这里有一个我试图实现的快速gif main.js文件中的代码 function createWindow () { const electronScreen = electron.screen //const {width, h

不知何故，我无法以全屏分辨率绘制矩形，从左到上始终有5px，如果我尝试在这些边界上移动光标，矩形绘制将停止，因为cusror更改为默认值，这意味着我在某个不可见的对象上，我怀疑这是窗口边界或其他东西

图中显示，我画的红框无法覆盖窗口边界，我在左上角用黑线标记了它们

这里有一个我试图实现的快速gif

main.js文件中的代码

function createWindow () {
 const electronScreen = electron.screen

//const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
const {width, height} = electronScreen.getPrimaryDisplay().bounds

const size = electronScreen.getPrimaryDisplay().size
mainWindow = new BrowserWindow({
  x: 0,
   y: 0,
   width,
   height,
   //width: size.width,
   //height: size.height,
   frame: false,
   show: true,
   transparent: true,
   resizable: false,
   fullscreen: true,
   titleBarStyle: 'hidden',
   //'always-on-top': true,
   alwaysOnTop: true,
   skipTaskbar: true,
   kiosk: true,
   disableAutoHideCursor: true,
   enableLargerThanScreen: true,
   useContentSize: true,
  })  
 ...
 }
index.html的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<style>
html, body {
  background-color: transparent !important;
  //background-color: rgba(0, 0, 0, 0);
  //background-color: rgba(0, 28, 42, 0.1);
  //background: rgba(0, 28, 42, 0.1);
  //color: rgba(0, 28, 42, 0.1);
  width:100%;
  height:100%;
  margin:0px;
  cursor: url(cursor.png), auto;
}

#canvasScreenshot {
width:100%;
height:100%;
//border: 10px solid transparent;
}
.rectangle {
border: 2px solid #FF0000;
position: absolute;
//background-color: rgba(0, 0, 0, 0);
//background-color: #fff;
//opacity: .1;
}



</style>
</head>
<body style="" >
<div id="canvasScreenshot"></div> 
<script>
  require('./renderer.js')

  window.addEventListener('contextmenu', (e) => {
    e.preventDefault()
    let {remote} = require('electron');
    remote.getGlobal("QuitApplication")();
  }, false)

    document.addEventListener("keydown", function (e) {
        if (e.which === 123) {
            require('remote').getCurrentWindow().toggleDevTools();
        } else if (e.which === 116) {
            location.reload();
        }
    });
</script>
</body>
</html>


你好，世界！
html，正文{
背景色：透明！重要；
//背景色：rgba（0,0,0,0）；
//背景色：rgba（0,28,42,0.1）；
//背景：rgba（0,28,42,0.1）；
//颜色：rgba（0,28,42,0.1）；
宽度：100%；
身高：100%；
边际：0px；
游标：url（cursor.png），自动；
}
#拉票截图{
宽度：100%；
身高：100%；
//边框：10px实心透明；
}
.矩形{
边框：2倍实心#FF0000；
位置：绝对位置；
//背景色：rgba（0,0,0,0）；
//背景色：#fff；
//不透明度：.1；
}
需要（“./renderer.js”）
window.addEventListener（'contextmenu'，（e）=>{
e、 预防默认值（）
设{remote}=require（'electron'）；
remote.getGlobal（“QuitApplication”）（）；
}，错）
文件.添加的文件列表器（“键控”，功能（e）{
如果（e.which==123）{
require（'remote'）.getCurrentWindow（）.toggleDevTools（）；
}否则，如果（e.which==116）{
location.reload（）；
}
});
我在renderer.js中截图并绘制rect的内容

const electron = require('electron')
const electronScreen = electron.screen

const desktopCapturer = electron.desktopCapturer

const shell = electron.shell

const fs = require('fs')
const os = require('os')
const path = require('path')

initDraw(document.getElementById('canvasScreenshot'));

function initDraw(canvas) {

  var DrawDone = 0;
  var DrawStarted = 0;

    function setMousePosition(e) {
        var ev = e || window.event; //Moz || IE
        if (ev.pageX) { //Moz
            mouse.x = ev.pageX + window.pageXOffset;
            mouse.y = ev.pageY + window.pageYOffset;
        } else if (ev.clientX) { //IE
            mouse.x = ev.clientX + document.body.scrollLeft;
            mouse.y = ev.clientY + document.body.scrollTop;
        }
    };

    var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    var element = null;

    canvas.onmousemove = function (e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }
    }

    document.body.oncontextmenu=function(event) {
         console.log(" Right click! ");
     };

    canvas.onclick = function (e) {
      console.log(e);
        if (element !== null) {
          console.log(element);

          var ssWidth = element.style.width;
          var ssHeight = element.style.height;
          var ssLeft = element.style.left;
          var ssTop = element.style.top;

          var RectanglePosition = {
            width: parseInt(ssWidth.replace("px","")),
            height: parseInt(ssHeight.replace("px","")),
            left: parseInt(ssLeft.replace("px","")),
            top: parseInt(ssTop.replace("px","")),
          }
            console.log(RectanglePosition);

            element = null;
            canvas.style.cursor = "not-allowed";
            console.log("finsihed.");
            console.log("Coordinates sent to controller.");
            DrawDone = 1;

              const thumbSize = determineScreenShotSize(RectanglePosition)
              let options = { types: ['screen'], thumbnailSize: thumbSize }

              desktopCapturer.getSources(options, function (error, sources) {
                if (error) return console.log(error)

                sources.forEach(function (source) {
                  if (source.name === 'Entire screen' || source.name === 'Screen 1') {
                    //const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
                    const screenshotPath = path.join(__dirname, 'screenshot.png')

                    fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
                      if (error) return console.log(error)

                      var Jimp = require("jimp");

                      Jimp.read(screenshotPath, function (err, image) {
                          if (err) throw err;
                          console.log(RectanglePosition)
                          image.crop(RectanglePosition.left+2,RectanglePosition.top+2, RectanglePosition.width, RectanglePosition.height )
                          .quality(100)
                          .write("SS.png");

                      });

                      //shell.openExternal('file://' + screenshotPath)
                      shell.openExternal('file://'+path.join(__dirname, 'SS.png'))
                      const message = `Saved screenshot to: ${screenshotPath}`
                      console.log(message);
                    })
                  }
                })
              })


            function determineScreenShotSize (RectanglePosition) {
              console.log(RectanglePosition)
              //const electronScreen = electron.screen
              const screenSize = electronScreen.getPrimaryDisplay().workAreaSize
              //const screenSize = electronScreen.getPrimaryDisplay().workArea

              const maxDimension = Math.max(screenSize.width, screenSize.height)
              //const maxDimension = Math.max(x: RectanglePosition.left, y: RectanglePosition.top, width: RectanglePosition.width, height: RectanglePosition.height)
              return {
                width: maxDimension * window.devicePixelRatio,
                height: maxDimension * window.devicePixelRatio
              }
            }



        } else {
          if(DrawDone === 0){
            console.log("begun.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            canvas.appendChild(element)
            //canvas.style.cursor = "crosshair";
          } else {
            console.log("drawing is finished. Crop time");
            element = document.createElement('div');
            canvas.appendChild(element)
            canvas.style.cursor = "not-allowed";
          }
        }
    }
}

const electron=require（'electron'））
常量电子屏幕=电子屏幕
const desktopCapturer=electron.desktopCapturer
const shell=electron.shell
常量fs=require（'fs'）
常量os=require（'os'）
const path=require（'路径'）
initDraw（document.getElementById（'canvasScreenshot'）；
函数initDraw（画布）{
var-DrawDone=0；
var=0；
函数设置鼠标位置（e）{
var ev=e | | window.event；//Moz | | IE
如果（ev.pageX）{//Moz
mouse.x=ev.pageX+window.pageXOffset；
mouse.y=ev.pageY+window.pageYOffset；
}else如果（ev.clientX）{//IE
mouse.x=ev.clientX+document.body.scrollLeft；
mouse.y=ev.clientY+document.body.scrollTop；
}
};
变量鼠标={
x:0,，
y:0，
startX:0，
startY:0
};
var元素=null；
canvas.onmousemove=函数（e）{
设置鼠标位置（e）；
if（元素！==null）{
element.style.width=Math.abs（mouse.x-mouse.startX）+“px”；
element.style.height=Math.abs（mouse.y-mouse.startY）+'px'；
element.style.left=（mouse.x-mouse.startX<0）？mouse.x+'px'：mouse.startX+'px'；
element.style.top=（mouse.y-mouse.startY<0）？mouse.y+'px'：mouse.startY+'px'；
}
}
document.body.oncontextmenu=函数（事件）{
log（“右键单击！”）；
};
canvas.onclick=函数（e）{
控制台日志（e）；
if（元素！==null）{
控制台日志（元素）；
var ssWidth=element.style.width；
var ssHeight=element.style.height；
var ssLeft=element.style.left；
var ssTop=element.style.top；
变量矩形位置={
宽度：parseInt（ssWidth.replace（“px”和“”），
高度：parseInt（ssHeight.replace（“px”和“”），
左：parseInt（ssLeft.replace（“px”和“”），
顶部：parseInt（ssTop.replace（“px”，“”），
}
控制台日志（矩形位置）；
元素=空；
canvas.style.cursor=“不允许”；
console.log（“finsihed”）；
日志（“坐标发送到控制器”）；
DrawDone=1；
常量thumbSize=确定屏幕大小（矩形位置）
let options={types:['screen']，thumbnailSize:thumbSize}
desktopCapturer.getSources（选项、函数（错误、源）{
if（错误）返回console.log（错误）
sources.forEach（函数（source）{
如果（source.name==‘整个屏幕’| | source.name===‘屏幕1’）{
//const screenshotPath=path.join（os.tmpdir（），'screenshot.png'）
const screenshotPath=path.join（uu dirname，'screenshot.png'）
fs.writeFile（screenshotPath，source.缩略图.toPng（），函数（错误）{
if（错误）返回console.log（错误）
var Jimp=要求（“Jimp”）；
Jimp.read（屏幕快照路径、函数（错误、图像）{
如果（错误）抛出错误；
控制台日志（矩形位置）
图像.裁剪（矩形位置.左+2，矩形位置.上+2，矩形位置.宽度，矩形位置.高度）
.品质（100）
.write（“SS.png”）；
});
//shell.openExternal（'文件：/'+屏幕快照路径）
shell.openExternal（'file://'+path.join（\uu dirname，'SS.png'））
const message=`已将屏幕截图保存到：${screenshotPath}`
控制台日志（消息）；
})
}
})
})
函数确定屏幕大小（矩形位置）{
控制台日志（矩形位置）
//常量电子屏幕=电子屏幕
const screenSize=electronScreen.getPrimaryDisplay（）.workAreaSize
//const screenSize=electronScreen.getPrimaryDisplay（）工作区
const maxDimension=Math.max（screenSize.width、screenSize.height）
//常量maxDimension=Math.max（x:矩形位置