How to get image dimensions?

In this line you need to insert the width and height of the image
image1.drawImage(img2, eyesRect[0], eyesRect[1], WIDTH, HEIGHT);

how to obtain these numbers for the image
img2.src = '/upload/c376b.png';
The complete code
$(document).ready(function() {
const video = $('#webcam')[0];
const ctrack = new clm.tracker();
ctrack.init();
const overlay = $('#overlay')[0];
const overlayCC = overlay.getContext('2d');
trackingLoop function() {
requestAnimationFrame(trackingLoop);
 let currentPosition = ctrack.getCurrentPosition();
 overlayCC.clearRect(0, 0, 800, 600);
 if (currentPosition) {
 // ctrack.draw(overlay);
};

 if (currentPosition) {
 const eyesRect = getEyesRectangle(currentPosition);
 overlayCC.strokeStyle = 'transparent';
 // overlayCC.strokeStyle = 'red';
 overlayCC.strokeRect(eyesRect[0], eyesRect[1], eyesRect[2], eyesRect[3]);
var img2=new Image(); // Create the image
img2.src = '/upload/c376b.png';
var canvas=document.getElementById("lenses")
var image1=overlay.getContext("2d");
image1.drawImage(img2, eyesRect[0], eyesRect[1], WIDTH, HEIGHT);
console.log(eyesRect);
}
}
onStreaming function(stream) {
video.srcObject = stream;
ctrack.start(video);
trackingLoop();
}
 navigator.mediaDevices.getUserMedia({ video: true }).then(onStreaming);
});

getEyesRectangle function(positions) {
 const minX = positions[0][0] + 0;
 const maxX = positions[14][0] + 0;
 const minY = positions[22][1] + 0;
 const maxY = positions[34][1] + 0;
 const width = maxX - minX;
 const height = maxY - minY;
 return [minX, minY, width, height];
}
March 19th 20 at 08:48
2 answers
March 19th 20 at 08:50
Solution
const getImageSizes = src => new Promise((resolve, reject) => {
 const img = new Image();
 img.onload = () => resolve({ width: img.width, height: img.height });
 img.onerror = reject;
 img.src = src;
});


getImageSizes(here the path to your picture).then(sizes => {
...
});
Do not get me to understand.
What should be instead of the ellipsis?
getImageSizes(here the path to your picture).then(sizes => {
...
});
- Domenico_Bayer commented on March 19th 20 at 08:53
[beats head against monitor]

@Domenico_Bayer, your code that uses the size. - Brandt.Mora commented on March 19th 20 at 08:56
@Brandt.Mora,
const getImageSizes = src => new Promise((resolve, reject) => {
 const img = new Image();
 img.onload = () => resolve({ width: img.width, height: img.height });
 img.onerror = reject;
 img.src = src;
});

getImageSizes('my url here').then(sizes => {
console.log(sizes); // here I can see the size
});


Sorry, I see the size
console.log(sizes);
{width: 300, height: 89}
Wanted to get just such a record
300, 89
Remove this line word for width: and height:
img.onload = () => resolve({ width: img.width, height: img.height });

I receive an error.
How can I get the entry in this format: 300, 89? i.e. without words width and height - Domenico_Bayer commented on March 19th 20 at 08:59
@Domenico_Bayer, well, glue a string:

.then(sizes => {
 const s = `${sizes.width}, ${sizes.height}`;
- Brandt.Mora commented on March 19th 20 at 09:02
March 19th 20 at 08:52
width and height

Makes size to alert, Chechnia:

var img = new Image();
img.onload = function() {
 alert(this.width + 'x' + this.height);
};
img.src = 'http://source-to.png';
It works - Domenico_Bayer commented on March 19th 20 at 08:55

Find more questions by tags JavaScript