HTML5 Canvas 有效并在点击任意位置时消失

Question

在我的以下代码中，Canvas 完美运行，它显示在我的地图上，然后当我尝试点击任何地方时它消失了。

我尝试了在 (Whosebug) 中提交的所有可能的方法作为解决方案，但没有办法，也许我的代码有一些错误导致了这个问题。

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

我们对您的申请没有完整的了解，因此以下某些评论将依赖于假设。

您正在选择带有 class .ol-unslectable 的第一个元素，这可能是 HTML Canvas.

然后您运行通过 Canvas 的像素并根据是否满足特定条件更改颜色值。

然后您将像素放回您从中取出的 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);

现在，我知道这可能不是您正在寻找的帮助，但您描述的不规则效果在您的示例代码中并不明显。我很确定你需要那些额外的变量来做某事——但从这个问题来看，还不清楚 'something' 可能是什么。

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

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

Answer 2

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

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

谢谢大家..

HTML5 Canvas 有效并在点击任意位置时消失

HTML5 Canvas works and disappear when click anywhere

javascript

canvas

openlayers

html5-canvas