您正在使用过期的浏览器。它可能无法正确显示此网站或其他网站。
您应该升级或使用 替代浏览器.

比较2个画布元素

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
我如何比较2个没有图像的画布元素,因为代码来自c#中的客户端?
在我的自动化测试中,我有案例要在执行某些操作之后比较图像之前和之后,但是问题是画布元素和图像是从客户端创建的,因此我无法理解如何在这种情况下进行比较:

HTML源代码:

<div class="canvas-container" style="宽度:492px;高度:492px;职位:相对用户选择:无;"><canvas _ngcontent-ctc-c5 ="" id="collage-canvas" class="lower-canvas" width="492" height="492" style="位置:绝对;宽度:492px;高度:492px;左:0px;顶部:0px;触摸动作:无;用户选择:无;"></canvas><canvas class="upper-canvas " width="492" height="492" style="位置:绝对;宽度:492px;高度:492px;左:0px;顶部:0px;触摸动作:无;用户选择:无; cursor: move;"></canvas></div>


我需要比较的画布


// canvas [@ class ='upper-canvas']
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,497
地点
弗吉尼亚州切萨皮克
编程经验
10+
我认为在这种情况下,您需要使用Selenium或其他一些Web测试工具,并在进行图像比较之前和之后进行操作。我认为没有一种通用的方法可以在服务器端或单元/集成测试中进行这种比较,而无需编写自己的HTML5解析器解释器。
 

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
我认为在这种情况下,您需要使用Selenium或其他一些Web测试工具,并在进行图像比较之前和之后进行操作。我认为没有一种通用的方法可以在服务器端或单元/集成测试中进行这种比较,而无需编写自己的HTML5解析器解释器。
I tried researching on that but unfortunately couldn't find any 正确 solution for that :(
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,497
地点
弗吉尼亚州切萨皮克
编程经验
10+
您为什么得出没有适当解决方案的结论?还是一个问题"easy"您正在寻找的解决方案,而不是"proper" solution?
 

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
我尝试下面的代码:

var 之前Image =(((IJavaScriptExecutor)Driver).ExecuteScript("var canvas = document.getElementsByClassName('upper-canvas')[0]; var imgData = canvas.toDataURL();返回imgData;");

但是在这段代码中,即使前后图像不一样,图像也一样
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,497
地点
弗吉尼亚州切萨皮克
编程经验
10+
我对第7个帖子的解释是,您正在使用两个不同的变量,但是据我所知,您也在填充这两个变量" 完成某些操作并更改图片"。填充一个变量是否更有意义 之前 动作和其他变量 那个行动?

Also,what is the type of 之前Image? Is it a C# 串? Or it some special class?
 

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
我对第7个帖子的解释是,您正在使用两个不同的变量,但是据我所知,您也在填充这两个变量" 完成某些操作并更改图片"。填充一个变量是否更有意义 之前 动作和其他变量 那个行动?

Also,what is the type of 之前Image? Is it a C# 串? Or it some special class? normal var 之前image - 串
是的,在操作之前填充了一个变量值,在操作之后填充了另一个值,即使画布元素图像不同,我在画布元素中面临的唯一问题是两个值都显示相同
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,497
地点
弗吉尼亚州切萨皮克
编程经验
10+
什么 is the type of 之前Image? How are you comparing it with 后Image?
 

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
What is the type of 之前Image? How are you comparing it with 后Image?
var 之前Image =(((IJavaScriptExecutor)Driver).ExecuteScript("var canvas = document.getElementsByClassName('upper-canvas')[0]; var imgData = canvas.toDataURL();返回imgData;");

//一些动作

var 后Image =(((IJavaScriptExecutor)Driver).ExecuteScript("var canvas = document.getElementsByClassName('upper-canvas')[0]; var imgData = canvas.toDataURL();返回imgData;");
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,497
地点
弗吉尼亚州切萨皮克
编程经验
10+
You are not answering my question. 什么 type is that var 之前Image referring to. Is it a 串? Is it a JavaScript 目的?
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,497
地点
弗吉尼亚州切萨皮克
编程经验
10+
大概这两个字符串比较相同,因此您遇到了这个问题吗?

也许GUI是按老式方式设计/实现的:实际上有两个画布,并且根据状态,显示特定的画布。这与AJAX的工作方式相反,后者只有一个画布,并且该画布的内容已替换。
 

帕沙

知名会员
已加入
2020年4月29日
留言内容
64
编程经验
1-3
大概这两个字符串比较相同,因此您遇到了这个问题吗?

也许GUI是按老式方式设计/实现的:实际上有两个画布,并且根据状态,显示特定的画布。这与AJAX的工作方式相反,后者只有一个画布,并且该画布的内容已替换。
我认为以下对我有帮助


公共静态位图GetImageFromCanvas(此IWebDriver驱动程序,IWebElement元素)
{
var imageBase64 = Driver.ExecuteJavaScript<object>("返回参数[0] .toDataURL('image / png')。substring(22);", element);

返回ImageHelpers.ConvertBase64ToBmp(imageBase64);
}
 

跳伞

工作人员
已加入
2019年4月6日
留言内容
2,497
地点
弗吉尼亚州切萨皮克
编程经验
10+
您为什么认为这会有所帮助?如果前后字符串相同,则使用流中的数据创建的位图也将相同。
 
最佳 底部