当点击任意位置时，HTML5 Canvas可以工作并消失

Question

在下面的代码中，Canvas可以完美地工作，并且在我的地图上显示，然后在我尝试单击任何地方时它都消失了。

我尝试了在（StackOverflow）中作为解决方案提交的所有可能方法，但是没有办法，可能是我的代码有错误导致此。

html代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.4.2/ol.css" type="text/css">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.4.2/ol.js"></script>

    <canvas id="myCanvas" width="1000" height="500"></canvas>

    <button type="button" onclick="evt();">resolution</button>

js代码：

image = new ol.layer.Tile({
  source: new ol.source.XYZ({
    projection: 'EPSG:4326',
      wrapX: false,
    url: image/{z}/{x}/{-y}.png'
  })
});

    map.addLayer(image);

    function evt() {
      var canvasContext = $('.ol-unselectable')[0].getContext('2d');
      var canvas = document.getElementById('myCanvas');
      var imgData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
      var imageWidth = imgData.width;
      var imageHeight = imgData.height;
      var pix = imgData.data;
      var l = pix.length;
      var i;
      for (i = 0; l > i; i += 4) {
        if (pix[i] >= 100 && pix[i] <= 200 && pix[i + 1] >= 100 && pix[i + 1] <= 200 && pix[i + 2] >= 100 && pix[i + 2] <= 200) {
          pix[i] = 255;
          pix[i + 1] = 0;
          pix[i + 2] = 0;
        }
      }
      canvasContext.putImageData(imgData, 0, 0);
    };

Answer 1

我们对您的应用程序不完整，因此以下说明将基于假设。

您正在选择第一个类.ol-unslectable元素，该类可能是HTML Canvas。

然后，您将遍历该Canvas的像素并根据是否满足特定条件来更改颜色值。

然后，您将像素放回到从中获取像素的画布上。

您的代码中有很多是不必要的。

以下变量

• canvas
• imageWidth
• imageHeight
• red
• green
• blue
• x
• y

...在功能中不起作用。

您的imgData变量将图像的像素保留为与#myCanvas相同的尺寸，在#myCanvas下，更常见的是从源图像获取这些尺寸-毕竟，这些像素是在此处进行处理的。

如果我们从函数中删除所有多余的行，它将看起来像这样，并且仍然执行相同的任务。

/* 
  manipulate the pixels of $('.ol-unselectable')[0] 
*/
function evt (e) {
    var cnv = $('.ol-unselectable')[0],
        ctx = cnv.getContext('2d'),
        imgData = ctx.getImageData(0, 0, cnv.width, cnv.height),
        pix = imgData.data,
        l = pix.length,
        i = 0;

    for (; i < l; i += 4) {
        [
            pix[i],
            pix[i + 1],
            pix[i + 2]
        ].every(function (val) {
            return val >= 100 && val <= 200;
        }) && (
            pix[i] = 255,
            pix[i + 1] = 0,
            pix[i + 2] = 0
        );
    }
    ctx.putImageData(imgData, 0, 0);
}

我还建议您将eventListener注册到按钮元素上，而不要依赖onclick HTML属性。 为它分配一个唯一的id ...

<button id="reso">resolution</button>

...然后在DOM准备就绪后注册一个eventListener （以JQuery的方式）...

$("#reso").on("click", evt);

现在，我知道这可能不是您想要的帮助，但是您描述的异常影响在示例代码中并不明显。 我很确定您需要这些额外的变量才能执行某项操作-但从这个问题尚不清楚“某事”可能是什么。

尽管如此，至少您现在有了一个干净的函数，可以更有效地执行单个任务。 ;）

• 有关Array.prototype.every@MDN的更多信息。
• 画布像素操作@ MDN

Answer 2

我得到了解决方案，因为OpenLayers Map上的Canvas应该添加到函数的末尾

map.on('postcompose', function(event){
                  evt(event.context);
              });

谢谢你们..