Code Monkey home page Code Monkey logo

Comments (12)

ColonelParrot avatar ColonelParrot commented on July 17, 2024

Can you provide the complete code? Are there any errors in the console?

from jscanify.

minystreem56 avatar minystreem56 commented on July 17, 2024

from jscanify.

ColonelParrot avatar ColonelParrot commented on July 17, 2024

I'm going to need you to be more specific. All the starter code has been verified to work, so I will need you to send me the code that you are using.

from jscanify.

minystreem56 avatar minystreem56 commented on July 17, 2024

Ok sorry about that. I switched to the camera example but the 2 output windows are very small
index.html:

<html>
  <head>
    <script src="https://docs.opencv.org/4.7.0/opencv.js" async></script>
    <!-- warning: loading OpenCV can take some time. Load asynchronously -->
    <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
  </head>
  <body>
    <h4>Tiny TFJS example<hr/></h4>
    <video id="video"></video> <canvas id="canvas"></canvas>
    <!-- original video -->
    <canvas id="result"></canvas>
    <!-- highlighted video -->

    <script src="./index.js"> </script>
  </body>
</html>

index.js:

const scanner = new jscanify();
const canvasCtx = canvas.getContext("2d");
const resultCtx = result.getContext("2d");
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
  video.srcObject = stream;
  video.onloadedmetadata = () => {
    video.play();

    setInterval(() => {
      canvasCtx.drawImage(video, 0, 0);
      const resultCanvas = scanner.highlightPaper(canvas);
      resultCtx.drawImage(resultCanvas, 0, 0);
    }, 10);
  };
});

from jscanify.

ColonelParrot avatar ColonelParrot commented on July 17, 2024

canvas has a default height and width of 150px and 300px respectively. You have to resize the canvas to the dimensions of the video stream.

The working index.js code should be:

const scanner = new jscanify();
const canvasCtx = canvas.getContext("2d");
const resultCtx = result.getContext("2d");
navigator.mediaDevices.getUserMedia({
    video: true
}).then((stream) => {
    video.srcObject = stream;
    video.onloadedmetadata = () => {
        video.play();

        canvas.height = result.height = video.videoHeight;
        canvas.width = result.width = video.videoWidth;
        setInterval(() => {
            canvasCtx.drawImage(video, 0, 0);
            const resultCanvas = scanner.highlightPaper(canvas);
            resultCtx.drawImage(resultCanvas, 0, 0);
        }, 10);
    };
});

from jscanify.

minystreem56 avatar minystreem56 commented on July 17, 2024

I will test this

from jscanify.

minystreem56 avatar minystreem56 commented on July 17, 2024

Does the example only work with white paper?

from jscanify.

minystreem56 avatar minystreem56 commented on July 17, 2024

hmm, when I run this code, the final highlighted image does not appear.

<html>
  <head>
    <script src="https://docs.opencv.org/4.7.0/opencv.js" async></script>
    <!-- warning: loading OpenCV can take some time. Load asynchronously -->
    <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
  </head>
  <body>
    <img src="images.png" id="image" />

    <script src="./index.js"> </script>
  </body>
</html>

const scanner = new jscanify();
image.onload = function () {
  const highlightedCanvas = scanner.highlightPaper(image);
  document.body.appendChild(highlightedCanvas);
};

from jscanify.

ColonelParrot avatar ColonelParrot commented on July 17, 2024

Does the example only work with white paper?

No, if the contrast between the paper and the background is enough, it should also detect it. Detection is always based on contrast, not color.

from jscanify.

ColonelParrot avatar ColonelParrot commented on July 17, 2024

hmm, when I run this code, the final highlighted image does not appear.

Any errors in the console?

from jscanify.

minystreem56 avatar minystreem56 commented on July 17, 2024

from jscanify.

ColonelParrot avatar ColonelParrot commented on July 17, 2024

It takes longer to load jscanify than it takes to load your image - you have to ensure that OpenCV.js has loaded.
To ensure both have loaded, wrap your code in a load event listener.

Like so:

window.addEventListener("load", function() {
    const scanner = new jscanify();
    const highlightedCanvas = scanner.highlightPaper(image);
    document.body.appendChild(highlightedCanvas);
});

Although technically if this were the issue there would be an error in the console.

from jscanify.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.