Leaflet 在传单上显示瓷砖之前，如何对瓷砖层的瓷砖进行预处理？

我有一个大图像，我使用gdal2tiles.py将其分解为256x256个平铺

我在传单上以L.Tillelayer的形式展示。它很好用

现在，我想在tileLayer中渲染256x256瓷砖之前对其进行预处理。 我需要对这些存储的磁贴应用一个算法，该算法生成大小相同但内容不同的磁贴。它看起来像是动态更改存储的磁贴内容

是否可以用加工过的瓷砖替换瓷砖层中的瓷砖

我应该如何进行

---

我只想处理这些磁贴一次，所以我想我应该利用缓存。

@IvanSanchez谢谢你的回答

我创建了一个新的tileLayer，允许调用RESTAPI对Tile进行预测（获取并返回一个base64编码的PNG图像）

看见

/*
 * L.TileLayer.Infer, inspired by L.TileLayer.PixelFilter (https://github.com/GreenInfo-Network/L.TileLayer.PixelFilter/)
 */
L.tileLayerInfer = function (url, options) {
    return new L.TileLayer.Infer(url, options);
}

L.TileLayer.Infer = L.TileLayer.extend({
    // the constructor saves settings and throws a fit if settings are bad, as typical
    // then adds the all-important 'tileload' event handler which basically "detects" an unmodified tile and performs the pxiel-swap
    initialize: function (url, options) {
        L.TileLayer.prototype.initialize.call(this, url, options);
        // and add our tile-load event hook which triggers us to do the infer
        this.on('tileload', function (event) {
            this.inferTile(event.tile);
        });
    },

    // extend the _createTile function to add the .crossOrigin attribute, since loading tiles from a separate service is a pretty common need
    // and the Canvas is paranoid about cross-domain image data. see issue #5
    // this is really only for Leaflet 0.7; as of 1.0 L.TileLayer has a crossOrigin setting which we define as a layer option
    _createTile: function () {
        var tile = L.TileLayer.prototype._createTile.call(this);
        tile.crossOrigin = "Anonymous";
        return tile;
    },

    // the heavy lifting to do the pixel-swapping
    // called upon 'tileload' and passed the IMG element
    // tip: when the tile is saved back to the IMG element that counts as a tileload event too! thus an infinite loop, as wel as comparing the pixelCodes against already-replaced pixels!
    //      so, we tag the already-swapped tiles so we know when to quit
    // if the layer is redrawn, it's a new IMG element and that means it would not yet be tagged
    inferTile: function (imgelement) {
        // already processed, see note above
        if (imgelement.getAttribute('data-InferDone')) return;

        // copy the image data onto a canvas for manipulation
        var width  = imgelement.width;
        var height = imgelement.height;
        var canvas    = document.createElement("canvas");
        canvas.width  = width;
        canvas.height = height;
        var context = canvas.getContext("2d");
        context.drawImage(imgelement, 0, 0);

        // encode image to base64
        var uri = canvas.toDataURL('image/png');
        var b64 = uri.replace(/^data:image.+;base64,/, '');

        var options = this.options;

        // call to Rest API
        fetch('/api/predict', {
            method: 'POST',
            mode: 'no-cors',
            credentials: 'include',
            cache: 'no-cache',
            headers: {
              'Content-type': 'application/json',
              'Accept': 'application/json',
              'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify({
              'image': [b64]
            })

          })
          .then((response) => response.json())
          .then((responseJson) => {
            // Perform success response.
            const obj = JSON.parse(responseJson);
            image = "data:image/png;base64," + obj["predictions"][0];
            var img = new Image();
            img.onload = function() {
              // draw retrieve image on tile (replace tile content)
              context.globalAlpha = options.opacity
              context.drawImage(img, 0, 0, canvas.width, canvas.height);
            }
            img.src = image;
            imgelement.setAttribute('data-InferDone', true);
            imgelement.src = image;

          })
          .catch((error) => {
            console.log(error)
          });
    }
});