自动将 Dynmap 网页上的地图图片合成为一张图

游戏版本：Minecraft Java Edition 1.12.2
Dynmap 版本：3.0 Beta 4

简介

• 根据我的 Minecraft 服务器的一位玩家的需求写的 JavaScript。
• 可自动将 Dynmap 网页上分块的地图图片合成为一张图。
• 建议使用 Chrome 浏览器或 Chromium 内核的浏览器进行操作。
• 因为是在 前端 进行合成，需要在操作前浏览一次要导出的地图区域。
• 结果会在新窗口中显示（若不能弹出新窗口，请将 弹出新窗口 设置为 允许）。
• 不建议合成过大的区域，否则可能会导致浏览器崩溃。
• 本代码可能并不是最优的方案，欢迎各位在评论区提出建议。

代码

2020-06-28

var base64_data = '';
var images = document.querySelectorAll('#mcmap .map .leaflet-map-pane .leaflet-tile-pane .leaflet-layer img');
var images_len = images.length;                                   // 图片数量
var result_window = window.open('', '', 'width=800, height=480'); // 新窗口：显示结果
function getTrans3DInfo(elem) {
    // 提取 translate3d X Y Z 的值（文本）并转换为数字
    var trans3d_info = elem.style.transform.replace(/translate3d\(|px|\)/g, '').split(', ').map(Number);
    // X, Y
    return [trans3d_info[0], trans3d_info[1]];
}
function gettrans_info() {
    console.log('获取 Transform 最值信息');
    var image_trans;
    var min_x = 0, min_y = 0, max_x = 0, max_y = 0;
    for (let i = 0; i < images_len; i++) {
        image_trans = getTrans3DInfo(images[i]);
        if (image_trans[0] < min_x) {
            min_x = image_trans[0];
            // console.log("min_x 元素：" + i);
        }
        if (image_trans[1] < min_y) {
            min_y = image_trans[1];
            // console.log("min_y 元素：" + i);
        }
        if (image_trans[0] > max_x) {
            max_x = image_trans[0];
            // console.log("max_x 元素：" + i);
        }
        if (image_trans[1] > max_y) {
            max_y = image_trans[1];
            // console.log("max_y 元素：" + i);
        }
    }
    return [min_x, min_y, max_x, max_y];
}
function draw(fn) {
    console.log("开始绘制");
    var trans_info = gettrans_info();
    var c = document.createElement('canvas');
    var ctx = c.getContext('2d');
    c.width = trans_info[2] - trans_info[0];  // 画布元素宽度
    c.height = trans_info[3] - trans_info[1]; // 画布元素高度
    ctx.rect(0, 0, c.width, c.height);        // 创建矩形画布
    // ctx.fillStyle = '#FFF';
    // ctx.fill();
    function drawing(n) {
        console.log('绘制中：' + n + ' / ' + images_len);
        if (n < images_len) {
            var image_trans = getTrans3DInfo(images[n]);
            var pos_x = image_trans[0] + Math.abs(trans_info[0]);
            var pos_y = image_trans[1] + Math.abs(trans_info[1]);
            console.log("坐标：" + pos_x + ", " + pos_y);
            ctx.drawImage(images[n], pos_x, pos_y);
            // 递归
            drawing(n + 1);
        } else {
            console.log('已合成，等待显示结果');
            // base64_data = c.toDataURL('image/jpeg', 0.8); // JPEG
            base64_data = c.toDataURL('image/png');          // PNG
            fn();
        }
    }
    drawing(0);
}
function mergeImages() {
    console.log('开始合成');
    draw(function() {
        result_window.document.write('<img src="' + base64_data + '" />');
        result_window.focus();
        console.log('结束');
    })
}
mergeImages();

使用方式（二选一）

常规方式

1. 在浏览器打开 Dynmap 的页面。

2. 打开浏览器的 开发人员工具（可使用快捷键 Ctrl + Shift + I）。
   

   第二步

3. 切换到 Console（控制台）标签页，并将上方的 代码 粘贴至输入区。
   

   第三步

4. 按下 Enter（回车），等待即可。

对于管理员

• 若您是服务器的管理人员，且对 HTML、CSS、JavaScript 有了解，可将本代码写入到 Dynmap 的网页中（例如：作为点击事件绑定到特定的按钮上）。