比较 2 个画布元素的相似性并返回结果
Posted
技术标签:
【中文标题】比较 2 个画布元素的相似性并返回结果【英文标题】：compare 2 canvas elements for similarity and return result 【发布时间】：2020-08-28 16:49:45 【问题描述】：我是 js 和 html5 的新手，所以这就是我正在做的事情：我正在开发一款有助于教授插画家快捷方式的游戏，第一个级别由 2 个画布组成，一个具有现有图像，另一个为空白并准备好让用户在 ctrl + s 上绘图（确保我使用 jquery 禁用了它的默认操作）我想比较这两个画布元素的内容。我发现 deepai.org 的图像相似度 api 非常有用和准确，但它只接受 url 或 input="file" 内容，所以我试图找到一种方法将绘制的画布作为图像上传（可能）到一个服务器并获取这样的 url：https://server.com/myaccount/images/img1.png 并且由于我只上传一个图像，我可以将该静态 url 传递给 api 以及原始图像，该图像也将具有一个静态 url，因此希望它可以进行比较。
【问题讨论】：
你用的是什么后端框架？ @rkalra 我不使用任何框架（你的意思是 node.js ...？）而且我更喜欢不使用其他任何东西，只使用 js、html5 和 jquery，因为我熟悉这些语言 您可能会发现这个答案很有用 - ***.com/a/15773267/3306990。希望这会有所帮助。 嘿！请尝试更详细地解释您的问题：您有服务器吗？也许这可以为您解决：***.com/a/13198699/9450776 Best,Paul @Pauloco 我试图将我的图像放在本地主机上但没有运气，所以我现在正在尝试制作服务器或找到一种方法来托管我的文件 【参考方案1】：我制作了一个无需服务器即可工作的解决方案。但我无法让它在像 jsfiddle 这样的在线代码仓库中工作。所以我把它放在我自己的服务器上供你检查。 http://paulyro.com/paul/deepai/
为方便起见，我将所有内容都放在一个文件中。当然，将 JS 保存在单独的文件中是有意义的。但我让你自己决定。
解释：黑框内的红色方块是画布。我生成两个图像并将它们添加到页面中。然后，当您按下按钮时，我会将这些图像发送到 deepAI 服务器。您只需要一个生成的 img，但出于测试目的，我制作了 2 个。
如果这就是您要找的，请告诉我。当然，我希望您根据自己的具体需求调整此解决方案；）
这是代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>DeepAiDemo</title>
<script src="https://cdnjs.deepai.org/deepai.min.js"></script>
<style rel="stylesheet">
canvas
border: 1px solid black;
</style>
</head>
<body>
<canvas id="canvas1" ></canvas>
<button name="button" onClick="load()">Press me</button>
<div style="position:absolute;left:400px; top:30px; height: 354px;" id="messages">Result will get here</div>
<script type="text/javascript">
(async function()
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
// create green canvas and make it an image
ctx.fillStyle = "green";
ctx.fillRect(75, 75, 50, 50);
var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);
// create red canvas and make it an image
ctx.fillStyle = "red";
ctx.fillRect(75, 75, 50, 50);
var img2 = new Image();
img2.src = can.toDataURL();
document.body.appendChild(img2);
)()
const load = async () =>
document.getElementById('messages').innerHTML = "Waitng for response...";
deepai.setApiKey('xxxxxxxxxxxxxx');
var images = document.getElementsByTagName('img');
console.log("amount images: "+images.length);
console.log(images[0]);
console.log(images[1]);
var resp = await deepai.callStandardApi("image-similarity",
image1: images[0],
image2: images[1],
);
console.log("response: ");
console.log(resp);
document.getElementById('messages').innerHTML = "Distance: " + resp.output.distance; //resp.output.distance contains the number from the server.
;
</script>
</body>
</html>
干杯， 保罗
【讨论】：
谢谢你，我没想过将图像保存到数组中，希望这对我有用，我会尽快尝试并告诉你它是否有效（今天确定） 太棒了。当然，慢慢来。当然微调是个好主意。例如。如果您有大量图像，您可以将图像附加到带有 ID 的特定 div，这样您就可以轻松找到它，而不是我的解决方案，HTML 正文中只有 2 张图片。 谢谢你救了我！！！但我现在遇到了另一个问题，因为其中一个画布内容是从文件（drawimage）中设置的，所以它给出了“可能无法导出受污染的画布”有什么办法可以解决这个问题吗？我在绘制的画布上尝试了您的代码（我将其输入为 img1 和 iimg2），万岁我得到了距离 0。 很高兴知道。一旦您满意，请将答案标记为已接受。该错误来自跨域问题尝试在加载之前将其添加到您的drawimage：。进一步阅读：***.com/questions/22710627/… 我现在收到此错误：“CORS 策略已阻止从原点 'null' 访问 'file:///xxxxx/Desktop/illustrator_game/level/level.png' 中的图像：Cross原始请求仅支持协议方案：http、data、chrome、chrome-extension、https。"有任何想法吗 ？我认为 crossorigin 适用于 node.js 对吗？以上是关于比较 2 个画布元素的相似性并返回结果的主要内容，如果未能解决你的问题，请参考以下文章
为啥我得到这个错误结果=方法（y）FutureWarning：元素比较失败；而是返回标量