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 code：

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准备好后（JQuery方式）注册eventListener ...

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

现在，我知道这可能不是您所寻求的帮助，但您描述的不规则效果在您的示例代码中并不明显。我很确定你需要那些额外的变量来做某些事情 - 但从问题来看，它并不清楚究竟是什么＆＃39;某些东西＆＃39;可能是。

尽管如此，至少你现在拥有一个干净的功能，能够更有效地执行它的单一任务。 ;）

更多关于Array.prototype.every @ MDN。
画布Pixel manipulation @ MDN

Answer 2

我得到了解决方案，对于 Canvas on OpenLayers Map ，应该添加到函数的末尾

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

谢谢大家..

HTML5 Canvas在任何地方点击时都可以工作和消失

2 个答案: