Canvas可缩放并获得真实像素坐标

Question

我有一张无人机拍摄的地图图片 而且大小是8916x6888。它太大了

我已经将图像绘制到Canvas中，我正在寻找可用于缩放和拖动画布以及鼠标悬停在画布上的javascript 我希望它返回真实的像素坐标，现在它从画布返回像素。 （如果我调整画布大小，它将返回调整大小画布的像素坐标）

var canvas = document.getElementById('canvas1');
            var img = new Image();
            img.onload = function () {
                canvas.getContext("2d").drawImage(img, 0, 0, img.width,    img.height, 0, 0, canvas.width, canvas.height); 
            }
            img.src = "http://xxxx.com/xxx.png";

            canvas.addEventListener("mousemove",function(e){
                 var eventLocation = getEventLocation(this,e);
                var coord = "x=" + eventLocation.x + ", y=" + eventLocation.y;

                // Get the data of the pixel according to the location generate by the getEventLocation function
                var context = this.getContext('2d');
                var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data; 

                // If transparency on the image
                if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
                            coord += " (Transparent color detected, cannot be converted to HEX)";
                }


                //  and coordinates.
                console.log(coord);
            },false);

            function getElementPosition(obj) {
                var curleft = 0, curtop = 0;
                if (obj.offsetParent) {
                    do {
                        curleft += obj.offsetLeft;
                        curtop += obj.offsetTop;
                    } while (obj = obj.offsetParent);
                    return { x: curleft, y: curtop };
                }
                return undefined;
            }

            function getEventLocation(element,event){
                    var pos = getElementPosition(element);

                return {
                        x: (event.pageX - pos.x),
                    y: (event.pageY - pos.y)
                };
            }