Highlighted image does not show

minystreem56 commented 10 months ago

I am using the the starter js code but the highlighted image does not load.

ColonelParrot commented 10 months ago

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

minystreem56 commented 10 months ago

The code is on the wiki, The console just says Error: null

On Wed, Jan 3, 2024 at 4:19 PM ColonelParrot @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/ColonelParrot/jscanify/issues/22#issuecomment-1876044883, or unsubscribe https://github.com/notifications/unsubscribe-auth/AV5367XSCZADGS6F3GN7HFDYMXKOVAVCNFSM6AAAAABBLYTFNKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZWGA2DIOBYGM . You are receiving this because you authored the thread.Message ID: @.***>

-- Sam Lewis Founder and Lead Developer BetaCat

ColonelParrot commented 10 months ago

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.

minystreem56 commented 10 months ago

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);
  };
});

ColonelParrot commented 10 months ago

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);
    };
});

minystreem56 commented 10 months ago

I will test this

minystreem56 commented 10 months ago

Does the example only work with white paper?

minystreem56 commented 10 months ago

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);
};

ColonelParrot commented 10 months ago

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.

ColonelParrot commented 10 months ago

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

Any errors in the console?

minystreem56 commented 10 months ago

Nope, no errors.

On Fri, Jan 5, 2024 at 3:22 PM ColonelParrot @.***> wrote:

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

Any errors in the console?

— Reply to this email directly, view it on GitHub https://github.com/ColonelParrot/jscanify/issues/22#issuecomment-1879271609, or unsubscribe https://github.com/notifications/unsubscribe-auth/AV5367RRVC3VGRHZM7IZPSLYNBVHPAVCNFSM6AAAAABBLYTFNKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZZGI3TCNRQHE . You are receiving this because you authored the thread.Message ID: @.***>

-- Sam Lewis Founder and Lead Developer BetaCat

ColonelParrot commented 10 months ago

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.

puffinsoft / jscanify

Highlighted image does not show #22