比较 2 个画布元素的相似性并返回结果答案

【问题标题】：compare 2 canvas elements for similarity and return result比较 2 个画布元素的相似性并返回结果
【发布时间】：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，因为我熟悉这些语言
您可能会发现这个答案很有用 - stackoverflow.com/a/15773267/3306990。希望这会有所帮助。
嘿！请尝试更详细地解释您的问题：您有服务器吗？也许这可以为您解决：stackoverflow.com/a/13198699/9450776 Best,Paul
@Pauloco 我试图将我的图像放在本地主机上但没有运气，所以我现在正在尝试制作服务器或找到一种方法来托管我的文件

标签： javascript jquery html5-canvas

【解决方案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" width="200" height="200"></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：。进一步阅读：stackoverflow.com/questions/22710627/…
我现在收到此错误：“CORS 策略已阻止从原点 'null' 访问 'file:///xxxxx/Desktop/illustrator_game/level/level.png' 中的图像：Cross原始请求仅支持协议方案：http、data、chrome、chrome-extension、https。"有任何想法吗？我认为 crossorigin 适用于 node.js 对吗？