1

I'm new to js and html5 so here's what I'm doing : I'm working on a game that helps in teaching illustrator shortcuts, the firts level consist of 2 canvas one with an already existing image and the other blank and ready for user to draw on, on ctrl + s press(sure I disabled it's default action using jquery) I want to compare the content of those 2 canvas elements. I've found Image similarity api from deepai.org very useful and accurate, but it only accepts url or input="file" content, so I'm trying to find a way to upload (maybe) the drawn canvas as an image to a server and get the url like this : https://server.com/myaccount/images/img1.png and since i only upload one image I can pass that static url to the api in addition to the original image which will also have a static url so hopefully it compares.

beginner
  • 45
  • 8
  • what backend framework are you using? – rkalra May 12 '20 at 18:30
  • @rkalra i don't use any framework (you mean node.js ... ?) and i prefer not using anything else only js, html5 and jquery since am familiar with those languages – beginner May 12 '20 at 18:41
  • you might find this answer useful - https://stackoverflow.com/a/15773267/3306990. Hope this helps. – rkalra May 12 '20 at 18:48
  • Hey! Kindly try to explain your question in more detail: do you have a server? Maybe this solves it for you: https://stackoverflow.com/a/13198699/9450776 Best,Paul – Pauloco May 12 '20 at 19:03
  • @Pauloco i tried to put my images on the localhost but no luck so am trying now to make a server or find a way to host my files – beginner May 12 '20 at 19:12
  • @so2020so: that makes sense. The locahost is not reachable from the outside so you would not have a URL to pass on to deepai.org! An alternative could be to send the image directly via AJAX to the deepai server. But that would depend on their API (which I don't know). If you have a link to the product you are using, that might also be helpful... – Pauloco May 12 '20 at 19:27
  • @Pauloco here's the link https://deepai.org/machine-learning-model/image-similarity and one more thing, if it's possible , I can transform the canvas to an image and upload it somewhere on the web (dropbox, google drive ...) and get a static link to pass it to the api that could be very helpful, the trick is to bypass any user interaction (chose file or darg and drop it) hopefully that clarify my point. – beginner May 12 '20 at 19:40
  • @so2020so Here is a way to make it: use JS to convert the canvas to an image and attach it to the website: https://stackoverflow.com/a/16301879/9450776 .Then use the API from your link shown at // Example posting file picker input image (Browser only). – Pauloco May 12 '20 at 19:54
  • @pauloco The idea is that i don't want to use the file picker, but i will try the flag mentioned in the reference you left maybe the api can reach the local files on my laptop (i mean it detect the local url) and that will do the job for me – beginner May 12 '20 at 20:03
  • @Pauloco okay no luck again but i've found this https://www.codicode.com/art/upload_and_save_a_canvas_image_to_the_server.aspx but i have no idea about c# language or how to setup this server – beginner May 12 '20 at 20:11
  • @so2020so: I will set up a jsfidle and post a solution. – Pauloco May 12 '20 at 20:12
  • @Pauloco thank you in advance and if the solution require a server please let me know how to set it up so i can upload the images to it and pass their links to the ipa. – beginner May 12 '20 at 20:18

1 Answers1

0

I made a solution that works without a server. But I couldn't make it work in an online code repo like jsfiddle. So I put it on my own server for you to check. http://paulyro.com/paul/deepai/

For convenience I put everything in one file. Of course it would make sense to save the JS in a separate file. But I let that up to you.

For explanation: the red square in a black frame is the canvas. I generate two images and add them to the page. Then I send those images to the deepAI server when you press the button. You will only need one generated img, but for testing purpose I made 2.

Let me know if this is what you were looking for. Of course I expect you to adapt this solution to your exact needs ;)

This is the code:

<!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>

Cheers, Paul

Pauloco
  • 1,049
  • 1
  • 10
  • 19
  • thank you man i didn't think about saving images to an array hopefully that will work for me, I'll try it asap and let you know if it works (today sure) – beginner May 13 '20 at 05:38
  • Great. Sure, take your time. Of course fine tuning is a good idea. E.g. if you have plenty of images, you could append the image to a particular div with an ID, so you find it easily instead of my solution with only 2 pictures attached to the HTML body. – Pauloco May 13 '20 at 05:44
  • Thank you man you saved me !!! but i got another problem now, since one of the canvas content is set from files (drawimage) so it gives "Tainted canvases may not be exported" is there any way to solve this? I tried your code on the drawn canvas (i entered it as img1 and iimg2) and hooray i got distance 0. – beginner May 13 '20 at 06:15
  • Great to know. Please mark the answer as accepted once you are happy. That error comes from crossorigin problems try to add this to your drawimage before laoding it: . For further reading: https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported – Pauloco May 13 '20 at 06:20
  • i got this error now : "Access to image at 'file:///xxxxx/Desktop/illustrator_game/level/level.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." any ideas ? i think the crossorigin works for node.js right ? – beginner May 13 '20 at 06:26
  • Nevermind since the image is the same i uploaded it to imgbb.com and get it's direct link and that solved the problem thank you mate you're the best <3 – beginner May 13 '20 at 06:51