1

我在做什么：

我有办法将图像上传到画布上。然后，我使用 d3 的地图投影来允许选择不同的地图投影来将图像转换为。

问题：

仅当原始图像是 equirectangular 投影时，转换才有效。例如，如果我上传一个 equirectangular 地球地图，然后告诉它将其转换为 Robinson 投影，它就可以正常工作。如果我上传 Robinson 地图图像，然后尝试转换为 equirectangular 投影，它所做的只是用颜色填充透明数据（即它不起作用）。

我正在使用的代码：

function updateMapProjection(selection) {
    var projection = options[selection.selectedIndex].projection;
    //projection var will be something like 'd3.geo.robinson()`
    var projCanvas = document.getElementById('projectionCanvas');
    var projCtx = projCanvas.getContext('2d');
    projCtx.clearRect(0, 0, projCanvas.width, projCanvas.height);
    var tempImage = new Image();
    if (mapFile.indexOf("imgur.com") > -1) {
        tempImage.crossOrigin = "Anonymous";
    }
    tempImage.onload = function() {
        projCtx.drawImage(tempImage,0,0, projCanvas.width, projCanvas.height);

        var dx = projCanvas.width;
        var dy = projCanvas.height;

        var sourceData = projCtx.getImageData(0, 0, dx, dy).data;
        var target = projCtx.createImageData(dx, dy);
        var targetData = target.data;

        for (var y = 0, i = -1; y < dy; ++y) {
            for (var x = 0; x < dx; ++x) {
                var p = projection.invert([x, y]);
                if (!p) {
                    targetData[++i] = 0;
                    targetData[++i] = 0;
                    targetData[++i] = 0;
                    targetData[++i] = 0;
                    continue;
                }
                var λ = p[0],
                    φ = p[1];
                if (λ > 180 || λ < -180 || φ > 90 || φ < -90) {
                    i += 4;
                    continue;
                }
                var q = ((90 - φ) / 180 * dy | 0) * dx + ((180 + λ) / 360 * dx | 0) << 2;
                targetData[++i] = sourceData[q];
                targetData[++i] = sourceData[++q];
                targetData[++i] = sourceData[++q];
                targetData[++i] = 255;
            }
        }
        projCtx.clearRect(0, 0, dx, dy);
        projCtx.putImageData(target, 0, 0);
    }
    tempImage.src = mapFile;
    $(".loaderWrapper").hide();
}

有关工作示例，请参阅此 jsfiddle 。请注意，它并没有实际转换地图，而是用白色填充先前透明的区域。转换后的图像应如下所示。

4

0 回答 0