Javascript 比较2个画布元素的相似性并返回结果
我不熟悉js和html5，所以我现在做的是：我正在做一个游戏，帮助教学illustrator快捷方式，第一级由2个画布组成，一个已经存在图像，另一个空白，用户可以在按住ctrl+s键的同时绘制（当然我使用jquery禁用了它的默认操作）我想比较这两个画布元素的内容。我发现来自deepai.org的图像相似性api非常有用和准确，但它只接受url或input=“file”内容，所以我正在尝试找到一种上传的方法（可能）将绘制的画布作为图像发送到服务器，并获得如下url：由于我只上传了一个图像，因此除了原始图像外，我还可以将该静态url传递到api，原始图像也将具有静态url，因此希望可以进行比较。我提出了一个不使用服务器的解决方案。但我无法让它在像JSFIDLE这样的在线代码回购中工作。所以我把它放在我自己的服务器上让你检查 为了方便起见，我把所有的东西都放在一个文件里。当然，将JS保存在单独的文件中是有意义的。但我让你决定了 说明：黑色框架中的红方块是画布。我生成两个图像并将它们添加到页面中。然后，当你按下按钮时，我将这些图像发送到deepAI服务器。您将只需要一个生成的img，但出于测试目的，我制作了2个 让我知道这是否是你要找的。当然，我希望您能够根据自己的具体需要调整此解决方案；） 代码如下：Javascript 比较2个画布元素的相似性并返回结果,javascript,jquery,html5-canvas,Javascript,Jquery,Html5 Canvas,我不熟悉js和html5，所以我现在做的是：我正在做一个游戏，帮助教学illustrator快捷方式，第一级由2个画布组成，一个已经存在图像，另一个空白，用户可以在按住ctrl+s键的同时绘制（当然我使用jquery禁用了它的默认操作）我想比较这两个画布元素的内容。我发现来自deepai.org的图像相似性api非常有用和准确，但它只接受url或input=“file”内容，所以我正在尝试找到一种上传的方法（可能）将绘制的画布作为图像发送到服务器，并获得如下url：由于我只上传了一个图像，因此除
<!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>
迪帕代莫
帆布{
边框：1px纯黑；
}
按我
结果将在这里得到
（异步函数（）{
var can=document.getElementById（'canvas1'）；
var ctx=can.getContext（'2d'）；
//创建绿色画布并使其成为图像
ctx.fillStyle=“绿色”；
ctx.fillRect（75,75,50,50）；
var img=新图像（）；
img.src=can.toDataURL（）；
文件.正文.附件（img）；
//创建红色画布并使其成为图像
ctx.fillStyle=“红色”；
ctx.fillRect（75,75,50,50）；
var img2=新图像（）；
img2.src=can.toDataURL（）；
document.body.appendChild（img2）；
})()
const load=async（）=>{
document.getElementById（'messages'）.innerHTML=“等待响应…”；
deepai.setApiKey（'xxxxxxxxxxxxx'）；
var images=document.getElementsByTagName（'img'）；
log（“数量图像：+images.length”）；
console.log（图像[0]）；
console.log（图像[1]）；
var resp=wait deepai.callStandardApi（“图像相似性”{
图像1:图像[0]，
图像2：图像[1]，
});
console.log（“响应：”）；
控制台日志（resp）；
document.getElementById（'messages'）.innerHTML=“Distance:+resp.output.Distance；//resp.output.Distance包含来自服务器的数字。
};
Paul我提出了一个解决方案，它可以在没有服务器的情况下工作。但我无法让它在像JSFIDLE这样的在线代码回购中工作。所以我把它放在我自己的服务器上让你检查 为了方便起见，我把所有的东西都放在一个文件里。当然，将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>
迪帕代莫
帆布{
边框：1px纯黑；
}
按我
结果将在这里得到
（异步函数（）{
var can=document.getElementById（'canvas1'）；
var ctx=can.getContext（'2d'）；
//创建绿色画布并使其成为图像
ctx.fillStyle=“绿色”；
ctx.fillRect（75,75,50,50）；
var img=新图像（）；
img.src=can.toDataURL（）；
文件.正文.附件（img）；
//创建红色画布并使其成为图像
ctx.fillStyle=“红色”；
ctx.fillRect（75,75,50,50）；
var img2=新图像（）；
img2.src=can.toDataURL（）；
document.body.appendChild（img2）；
})()
const load=async（）=>{
document.getElementById（'messages'）.innerHTML=“等待响应…”；
deepai.setApiKey（'xxxxxxxxxxxxx'）；
var images=document.getElementsByTagName（'img'）；
log（“数量图像：+images.length”）；
console.log（图像[0]）；
console.log（图像[1]）；
var resp=wait deepai.callStandardApi（“图像相似性”{
图像1:图像[0]，
图像2：图像[1]，
});
console.log（“响应：”）；
控制台日志（resp）；
document.getElementById（'messages'）.innerHTML=“Distance:+resp.output.Distance；//resp.output.Distance包含来自服务器的数字。
};
Paul你在使用什么后端框架？@rkalra我不使用任何框架（你是说node.js…？），我更喜欢不使用其他任何东西，只使用js、html5和jquery，因为我熟悉这些语言。你可能会发现这个答案很有用-。希望这有帮助。嘿！请尝试更详细地解释您的问题：您有服务器吗？也许这能帮你解决问题：最好，Paul@Pauloco我试图把我的图像放在本地主机上，但运气不好，所以我现在正在尝试制作一个服务器或找到一种方法来托管我的fi