mercredi 9 mai 2018

Canvas strokeRect draws rectangle in wrong coordinates

I have my coordinates which I getting from back-end as (x,y,w,h).

These coordinates are definitely rectangle of the human face in the image that I uploaded and converted it to canvas. I'm sure because I tested it on backend.

 $scope.uploadFile = function(files) {
                var fd = new FormData();
            //Take the first selected file
            fd.append("file", files[0]);
            var reader = new FileReader();

            reader.onload = function(event) {
                var tempImg = new Image();
            tempImg.src = event.target.result //result dene

            tempImg.onload = function() {
                var imgWidth = tempImg.width;
                var imgHeight = tempImg.height;

                c.width = imgWidth;
                c.height = imgHeight;

                ctx.drawImage(tempImg, 0, 0);
                ctx.strokeRect(248, 85,381, 219);
            }

            $scope.$apply()

        }

I'm trying to draw rectangle by the coordinates as above. But canvas is drawing in wrong coordinates. Actually I'm guessing that x and y coordinates are true buy width and height are not exactly being draw correct. Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire