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
• imageWidth
• imageHeight
• red
• green
• blue
• x
• y

...不参与函数。

您的imgData 变量将图像的像素保存在与#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。
• 画布Pixel manipulation @ MDN

Answer 2

我得到了解决方案，对于 OpenLayers 地图上的画布，应该添加到函数的末尾

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

谢谢大家..