iClient for WebGL制作立面图如何删掉上下黑边

一、立面图的黑边问题

        在使用iClient for WebGL制作立面图时，很多用户会遇到一个常见的问题：立面图会在上方和下方生成黑色的边框，这会影响立面图的视觉效果，特别是在展示建筑物或城市模型时。为了获得更加精美和专业的立面图效果，我们需要删除或消除这些黑边。本文将介绍如何通过裁剪设置来去除立面图中的上下黑边，实现无黑边且更具美感的立面图渲染。

绘制立面图

带有黑边的立面图

二、去除黑边的具体步骤思路

        去除图像中的上下黑边（通常是背景色为黑色的区域），可以通过遍历每行像素来识别黑色区域并裁剪掉。具体来说，它的工作原理是：

1. 遍历图像的每一行，检查该行是否是完全黑色的。

2. 计算出上下边界，找到有效图像内容的顶部（top）和底部（bottom）。

3. 根据计算出的上下边界创建一个新的画布，并将裁剪后的图像绘制到新画布上。

三、去除黑边的具体代码步骤

1. 初始化和遍历每行像素

首先，我们创建一个新的画布 canvas，并将图像绘制到这个画布上，然后获取像素数据：

var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;

接着，我们定义 top 和 bottom 为上下边界初始值：

var top = 0, bottom = canvas.height, left = 0, right = canvas.width;

2. 找到顶部边界

代码通过遍历图像的每一行像素（从上往下），判断这一行是否完全黑色（通过判断像素的红、绿、蓝值是否都为0来确定是否为黑色）：

for (var y = 0; y < canvas.height; y++) {
    let isBlackRow = true;
    for (var x = 0; x < canvas.width; x++) {
        if (data[(y * canvas.width + x) * 4] + data[(y * canvas.width + x) * 4 + 1] + data[(y * canvas.width + x) * 4 + 2] != 0) {
            isBlackRow = false;
            break;
        }
    }
    if (!isBlackRow) {
        top = y;
        break;
    }
}

• data[(y * canvas.width + x) * 4] 获取像素点 (x, y) 的红色通道值，data[(y * canvas.width + x) * 4 + 1] 获取绿色通道，data[(y * canvas.width + x) * 4 + 2] 获取蓝色通道。

• 如果该行存在任何非黑色像素（即红、绿、蓝的值不为零），isBlackRow 设为 false，并记录此行为 top 边界。

3. 找到底部边界

然后，代码从下往上遍历每行，判断每一行是否是黑色的，找到最后一行有效内容所在的边界：

for (var y = canvas.height - 1; y >= 0; y--) {
    let isBlackRow = true;
    for (var x = 0; x < canvas.width; x++) {
        if (data[(y * canvas.width + x) * 4] + data[(y * canvas.width + x) * 4 + 1] + data[(y * canvas.width + x) * 4 + 2] != 0) {
            isBlackRow = false;
            break;
        }
    }
    if (!isBlackRow) {
        bottom = y;
        break;
    }
}

4. 裁剪图像并调整画布大小

通过计算出有效内容的 top 和 bottom 边界后，我们可以创建一个新的画布，并将裁剪后的图像绘制到这个新画布上：

var newHeight = bottom - top + 1;
var newCanvas = document.createElement("canvas");
newCanvas.width = canvas.width;
newCanvas.height = newHeight;
var newContext = newCanvas.getContext("2d");

// Draw the cropped image
newContext.drawImage(canvas, 0, top, canvas.width, newHeight, 0, 0, canvas.width, newHeight);

• newHeight 是裁剪后的高度（即有效内容的高度）。

• 新画布 newCanvas 被创建出来，并将裁剪后的图像内容绘制到新画布上。

5. 返回新画布

return newCanvas;

四、最终效果

去除上下黑边的立面图效果

注意：示例代码可以以下链接获取

链接：https://pan.baidu.com/s/1-6R2FoymwhZw2HuWxwZk0A
提取码：14oq