CODEWITHSUNDEEP
javascripthtmlcanvas
Tenebris
Tenebris

Reputation: 83

Canvas drawing different size of image than in the data returned

So I am trying to use the pixelmatch library that I found on github and I made this code. The problem I am facing is that the fuction returns the same dimensions to diff as the pictures before but when I put image data on the canvas only part of the image is drawn and I don't really know why. Since the dimensions in the debugger are the same in all three pictures.

    <img id="1" src="test/fixtures/3a.png">
        <img id="2" src="test/fixtures/3b.png">
        <img id="3" src="">
        <canvas id="myCanvas3"> </canvas>
        <button id="diff">Difference </button>

      <script src="pixelmatch.js"></script>
      <script>

        function os(){
            var canvas1 = document.createElement('canvas');
            var ctx1    = canvas1.getContext('2d');
            var canvas2 = document.createElement('canvas');
            var ctx2   = canvas2.getContext('2d');
            var canvas3 = document.getElementById('myCanvas3');
            var ctx3    = canvas3.getContext('2d');
            var myImgElement1 = document.getElementById('1');
            var width = myImgElement1.width, height=myImgElement1.height;
            ctx1.drawImage( myImgElement1, 0, 0 );
            var myImgElement2 = document.getElementById('2');
            ctx2.drawImage( myImgElement2, 0, 0);


        var img1 = ctx1.getImageData(0, 0, width,height),
            img2 = ctx2.getImageData(0, 0, width,height),
            diff = ctx3.createImageData(width, height);

        pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.05});

        ctx3.putImageData(diff, 0, 0);
    }

    window.onload = function(){
            document.getElementById('diff').addEventListener('click', os, false);
        };

  </script>`

Result: enter image description here

Upvotes: 1

Views: 194

Answers (1)

artgb
artgb

Reputation: 3233

Your problem is canvas size, you are using default canvas size.

<canvas id="myCanvas3"> </canvas>

change in html

<canvas id="myCanvas3" width = "500px" height = "500px"> </canvas>

or change javascript

 canvas3.width = width;
 canvas3.height = height;

I have tested in my computer.

To understand more add border to canvas element

<canvas id="myCanvas3" width = "500px" style = "border:solid rgb(200,100,200);"> </canvas>

Result: your image is drawed but putImageData not change the width and height of canvas element so you cant see the full content. enter image description here

Upvotes: 1

Related Questions