Question

在我的JSFiddle中，我有一个标记，我可以四处移动并分别更新文本框中的Lat Long值。当我移动标记时，我更新了标记下方较小比例的IMG，并将其显示在Google Map下方。我可以成功完成所有这些工作。

然而，我现在要做的是在IMG中加载位置（0,0）的Pixel数据，这样我就可以了解标记下像素的颜色，但无论我做什么，我总是得0 0 0 0！

我知道IMG正确加载，因为您可以在我的主要Google地图下看到一个小方框。但我觉得以下是有问题的：

    var canvas = $('<canvas/>')[0];
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);             
    var pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;

但是，我已经看到多个解决方案使用非常相似的代码片段来实现我想要的目标。

非常感谢任何帮助！

CSS：

#map 
{
   width: 525px;
   height: 500px;
}

img#mapImg 
{
   display: block;
}

体：

<div  id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
<br /><br /><br />
<label for="xGps">Lat:</label>
<input id="xGps" type="number" value="32.765813" />
<label for="yGps">Long:</label>
<input id="yGps" type="number" value="-79.875535" />

<img id="mapImg" src="" />
<div id="result"></div>

JavaScript的：

 function getColor() {
    var img = document.getElementById('mapImg');

    img.crossOrigin = 'anonymous';

    var xGps = $("#xGps").val();
    var yGps = $("#yGps").val();

    var mapUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" 
                 + xGps + "," + yGps 
                 + "&zoom=14&size=50x50&maptype=roadmap&sensor=false";

    $(img).attr("src", mapUrl);

    var canvas = $('<canvas/>')[0];
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);             
    var pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;

    $("#result").html(pixelData[0] + " " + pixelData[1] + " " 
                    + pixelData[2] + " " + pixelData[3]);
 }

 function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      'zoom': 12,
      'center': new google.maps.LatLng(32.765813, -79.914237),
      'mapTypeId': google.maps.MapTypeId.ROADMAP

    });

    marker1 = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(32.753512, -79.875535),
       draggable: true,
       raiseOnDrag: true
    });

    google.maps.event.addListener(marker1, 'drag', function (event) {
       document.getElementById('xGps').value = event.latLng.lat();
       document.getElementById('yGps').value = event.latLng.lng();
    });

    google.maps.event.addListener(marker1, 'dragend', function (event) {
       document.getElementById('xGps').value = event.latLng.lat();
       document.getElementById('yGps').value = event.latLng.lng();
       getColor();
    });
}

使用解决方案更新了JSFiddle。谢谢！

Answer 1

你必须等待图像加载。

尝试：

 $(img).attr("src", mapUrl).load(function(){

    var canvas = $('<canvas/>')[0];
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);             
    var pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;

    $("#result").html(pixelData[0] + " " + pixelData[1] + " " 
                    + pixelData[2] + " " + pixelData[3]);
});

从IMG获取像素颜色始终为0 0 0 0？

1 个答案: