selenium 怎么获取canvas图像中的某个动态元素

Posted 2023-04-27

有个页面canvas图像，每次访问里面元素坐标都会变化。我想通过selenium自动化点击其中的某个元素。怎么实现尼？求大神指教！
比如：
<canvas style="position: absolute; left: 0px; top: 0px; width: 625px; height: 500px;" width="625" height="500" data-zr-dom-id="_zrender_hover_"/>
<div class="echarts-tooltip" style="position: absolute; display: block; border-style: solid; white-space: nowrap; transition: left 0.4s ease 0s, top 0.4s ease 0s; background-color: rgba(0, 0, 0, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); padding: 5px; left: 205px; top: 338px;">123</div>
这里<div>的值通过点击页面不同元素，而有相应变化。拖拽页面元素，里面的坐标也会变化。

参考技术A canvas元素的omclick等事件就可以啊，我不清楚如何获得canvas的坐标，因为我要区分单击的是哪个位置追问

怎么获取尼，能不能简单举个列子。谢谢

canvas使用图像(绘制图、图像平铺、图像剪裁、像素处理、绘制文字)

参考技术A 绘制图像：drawImage()
获取图像数据：getImageData()
重写图像数据：putImageData()
导出图像：toDataURL()

顾名思义，该方法就是用于将图像绘制于Canvas画布当中，具体用法有三种：

① 在画布上定位图像：
context.drawImage(img,x,y)
② 在画布上定位图像，并规定图像的宽度和高度（缩放）：
context.drawImage(img,x,y,width,height)
③ 剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

效果：

createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 <canvas> 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。

效果：

使用图形上下文不带参数的clip()方法来实现Canvas图形裁切功能，该方法会使用先创建好的路径对canvas设置裁剪区域，裁剪指定区域显示内容。裁剪是对画布进行的，裁剪后的画布是不能恢复到原来的大小，因此使用save及restore。

效果：

我们可以直接从HTML5 canvas中获取单个像素。通过ImageData对象我们可以以读写一个数据数组的方式来操纵像素数据。当完成像素操作之后，如果要显示它们，需要将这些像素复制到canvas上。

ImageData对象代表canvas中某个区域的底层像素数据。它包含三个只读的属性：

width：图像的宽度，单位像素。
height：图像的高度，单位像素。
data：包含像素值的一维数组。

在data数组中的每一个像素包含4个字节的值。也就是说每一个像素由4个字节表示，每一个字节分别表示红色，绿色，蓝色和一个透明度alpha通道（RGBA）。

putImageData()函数将它们复制到canvas上。putImageData()函数有两种格式。第一种格式是复制所有的像素到canvas中。canvasX和canvasY参数是canvas上插入像素的x和y坐标。

sx和sy参数（sourceX 和 sourceY）是矩形左上角的x和y坐标。
sWidth和sHeight参数（sourceWidth 和 sourceHeight）是矩形的宽度和高度。

我们也可以从canvas上获取一个矩形区域的像素到一个ImageData对象中。通过getImageData函数可以完成这个操作。

x和y参数是从canvas上获取的矩形的左上角的坐标。

width和height参数是从canvas上获取的矩形的宽度和高度。

我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。
绘制文字的字体由font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用fillStyle和strokeStyle属性来完成。
要在canvas上绘制文字，可以通过的fillText()函数或strokeText()函数来完成。

表示在(x,y)的位置，绘制text的内容。可选参数maxWidth为文本的最大宽度，单位为像素。如果设置了该属性，当文本内容宽度超过该参数值，则会自动按比例缩小字体，使文本的内容全部可见；未超过时，则以实际宽度显示。如果未设置该属性，当文本内容宽度超过画布宽度时，超出的内容将被隐藏。

效果：