我是js和html5的新手，所以这是我正在做的事情：我正在开发一个有助于教授插画师快捷方式的游戏，第一级由2个画布组成，一个已经存在图像，另一个空白并准备好供用户绘制，在ctrl + s按(确保我禁用了它的默认操作使用jquery(我想比较这两个画布元素的内容。我发现 deepai.org 的图像相似性 api 非常有用和准确，但它只接受 url 或 input="file" 内容，所以我正在尝试找到一种方法将绘制的画布作为图像上传到服务器并获取如下网址： https://server.com/myaccount/images/img1.png，由于我只上传一张图像，除了原始图像之外，我还可以将该静态 url 传递给 api，该原始图像也将具有静态 url所以希望它比较。
我做了一个没有服务器的解决方案。但是我无法让它在像 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>
干杯 保罗