JavaScript サイズ指定された画像の実寸大の要素のXとYを得るには？

Question

サイズ指定(style="height:200px;height:200px")しなければ実寸大のクリックしたXとY座標が取れます
サイズ指定した場合にその指定したサイズの中のXとY座標が取れます
これをサイズ指定した状態で実寸大のXとY座標を取得することは可能でしょうか？
詳しい方教えて下さい

<img id="a" src="https://www.pngkit.com/png/detail/87-876311_pics-of-star-star-shape-blue-png-transparent.png" style="height:200px;height:200px" onclick="mmm()">

<script>
function mmm(){
	var clickX = event.pageX ;
	var clickY = event.pageY ;

	// 要素の位置を取得
	var clientRect = a.getBoundingClientRect() ;
	var positionX = clientRect.left + window.pageXOffset ;
	var positionY = clientRect.top + window.pageYOffset ;

	// 要素内におけるクリック位置を計算
	var x = clickX - positionX ;
	var y = clickY - positionY ;
	alert("X"+x+" Y:"+y);
}
</script>

Comments

[hoshi-takanori]

img 要素の naturalWidth や naturalHeight を使って計算すれば良いのでは。

[qesf]

理解が足らなくてすみません
どこをどのように手を加えたらいいでしょうか

var positionX = clientRect.left + a.naturalWidth ;
var positionY = clientRect.top + a.naturalHeight ;

こうしても動きませんでした

[BeatStar]

解決したのならベストアンサーを選びましょう。
それか『自己解決』として『どのように解決したか』を書きましょう。

[qesf]

まだ解決していません
教えていただいたやり方をコピペじゃ意味がないと思ってます
急かさないでください、分析し、自分が納得したら解決ではダメでしょうか

Answer 1

たとえば

<img id="a" src="https://placehold.jp/ff0000/00ffff/200x150.png" width="300" height="100" onclick="mmm()">
<script>
function mmm(){
  var clickX = event.pageX ;
  var clickY = event.pageY ;
  var clientRect = a.getBoundingClientRect() ;
  var positionX = clientRect.left + window.pageXOffset ;
  var positionY = clientRect.top + window.pageYOffset ;
  var x = Math.round((clickX - positionX)/a.width*a.naturalWidth) ;
  var y = Math.round((clickY - positionY)/a.height*a.naturalHeight) ;
  console.log("X"+x+" Y:"+y);
}
</script>

Comments

[qesf]

回答ありがとうございます
分析させていただきます
またわからないことがあればよろしくお願いいたします