寻找支持叠加实现矩阵加法的Colormap方案

API 探路者

2026-7-5

寻找支持图像叠加加法效果的Colormap

需要找到一种Colormap，使得用该Colormap生成的图像可通过opacity（不透明度）、alpha通道、mix-blend-mode（混合模式）等方式实现“叠加加法”效果：将多张图像叠加后，得到的结果图像仍符合该Colormap，且颜色效果等同于对原图像对应的数值矩阵进行逐元素相加后再用该Colormap绘制的结果。理想情况下该方案支持任意数量图像的叠加（如50张）。

加法定义说明

通过三个数据集示例：

左：np.linspace(0,1,49).reshape(7,7)（0到1的线性值构成7×7矩阵）
中：左矩阵的转置
右：0-1范围内的随机值矩阵
使用viridis Colormap绘制得到图1。将左矩阵与另外两个矩阵分别逐元素相加后绘制，得到图2（左为left+left，中为middle+left，右为right+left）。目标是通过HTML/CSS叠加图1中的单张图像，得到与图2类似的效果。

可调整变量

已知可调整的变量包括：

全局Colormap；
单张图像的opacity；
单张图像的alpha通道；
单张图像的mix-blend-mode。

实验尝试结果

图3：使用viridis Colormap，opacity设为50%，叠加效果（left|left、left|middle、left|right）与矩阵加法结果差异明显；
图4：使用matplotlib的binary Colormap，opacity设为50%，叠加效果接近但仍有不同；
图5：使用binary Colormap，底图opacity 100%、顶图opacity 50%叠加left与随机矩阵，效果接近left+RAND的矩阵加法结果，但第2行第1列单元格仍存在细微差异；
图6：固定Colormap映射范围（白色映射0，黑色映射1，加法后黑色映射2），该设置在两张灰度图像叠加时效果更接近矩阵加法；
图7：三张图像叠加时，opacity 50%的设置无法得到与三次矩阵加法完全一致的结果，最后列第3、4行仍有细微差异。

代码示例

Python生成图像代码

DATA = "geoopacity_data/"
RAND = np.random.uniform(size=49).reshape(7,7)

def plotfigs(cmap):
    fig, ax = plt.subplots()
    ax.imshow(np.linspace(0,1,49).reshape(7,7), cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}1.png".format(cmap), bbox_inches='tight')

    fig, ax = plt.subplots()
    ax.imshow(np.linspace(0,1,49).reshape(7,7).T, cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}2.png".format(cmap), bbox_inches='tight')
    
    fig, ax = plt.subplots()
    ax.imshow(RAND, cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}3.png".format(cmap), bbox_inches='tight')
def plotref(cmap):
    d1 = np.linspace(0,1,49).reshape(7,7)
    d2 = np.linspace(0,1,49).reshape(7,7).T
    d3 = RAND
    
    d11 = d1 + d1
    d12 = d1 + d2
    d13 = d1 + d3
    
    fig, ax = plt.subplots()
    ax.imshow(d11, cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}ref11.png".format(cmap), bbox_inches='tight')

    fig, ax = plt.subplots()
    ax.imshow(d12, cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}ref12.png".format(cmap), bbox_inches='tight')
    
    fig, ax = plt.subplots()
    ax.imshow(d13, cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}ref13.png".format(cmap), bbox_inches='tight')
def plotref2(cmap):
    d1 = np.linspace(0,1,49).reshape(7,7)
    d2 = np.linspace(0,1,49).reshape(7,7).T
    d3 = RAND
    
    d11 = d1 + d1 + d1
    d12 = d1 + d2 + d2
    d13 = d1 + d3 + d3
    
    fig, ax = plt.subplots()
    ax.imshow(d11, cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}ref111.png".format(cmap), bbox_inches='tight')

    fig, ax = plt.subplots()
    ax.imshow(d12, cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}ref122.png".format(cmap), bbox_inches='tight')
    
    fig, ax = plt.subplots()
    ax.imshow(d13, cmap=cmap)
    ax.axis('off')
    fig.savefig(DATA + "{}ref133.png".format(cmap), bbox_inches='tight')
    
plotfigs("viridis")
plotfigs("binary")
plotref("binary")
plotref2("binary")

HTML查看结果代码

<!doctype html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
    <style>
      img {
        opacity: 100%;
        left: 0;
      }
      .im {
        position: relative;
        display: inline-block;
      }
      .top {
        position: absolute;
        opacity: 50%;
      }
      .second {
        position: absolute;
        opacity: 50%;
      }
      .third {
        position: absolute;
        opacity: 50%;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="im">
        <img src="viridis1.png" style="opacity: 100%;"/>
      </div>
      <div class="im">
        <img src="viridis2.png" style="opacity: 100%;"/>
      </div>
      <div class="im">
        <img src="viridis3.png" style="opacity: 100%;"/>
      </div>
    </div>
    <div class="row">
      <div class="im">
        <img src="viridisref11.png" style="opacity: 100%;"/>
      </div>
      <div class="im">
        <img src="viridisref12.png" style="opacity: 100%;"/>
      </div>
      <div class="im">
        <img src="viridisref13.png" style="opacity: 100%;"/>
      </div>
    </div>
    <div class="row">
      <div class="im">
        <img src="viridis1.png"/>
        <img src="viridis1.png" class="top"/>
      </div>
      <div class="im">
        <img src="viridis1.png"/>
        <img src="viridis2.png" class="top"/>
      </div>
      <div class="im">
        <img src="viridis1.png"/>
        <img src="viridis3.png" class="top"/>
      </div>
    </div>
    <div class="row">
      <div class="im">
        <img src="binaryref11.png" style="opacity: 100%;"/>
      </div>
      <div class="im">
        <img src="binaryref12.png" style="opacity: 100%;"/>
      </div>
      <div class="im">
        <img src="binaryref13.png" style="opacity: 100%;"/>
      </div>
    </div>
    <div class="row">
      <div class="im">
        <img src="binary1.png"/>
        <img src="binary1.png" class="top"/>
      </div>
      <div class="im">
        <img src="binary1.png"/>
        <img src="binary2.png" class="top"/>
      </div>
      <div class="im">
        <img src="binary1.png"/>
        <img src="binary3.png" class="top"/>
      </div>
    </div>
    <div class="row">
      <div class="im">
        <img src="binaryref111.png" style="opacity: 100%;"/>
      </div>
      <div class="im">
        <img src="binaryref122.png" style="opacity: 100%;"/>
      </div>
      <div class="im">
        <img src="binaryref133.png" style="opacity: 100%;"/>
      </div>
    </div>
    <div class="row">
      <div class="im">
        <img src="binary1.png"/>
        <img src="binary1.png" class="second"/>
        <img src="binary1.png" class="third"/>
      </div>
      <div class="im">
        <img src="binary1.png"/>
        <img src="binary2.png" class="second"/>
        <img src="binary2.png" class="third"/>
      </div>
      <div class="im">
        <img src="binary1.png"/>
        <img src="binary3.png" class="second"/>
        <img src="binary3.png" class="third"/>
      </div>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Him

寻找支持叠加实现矩阵加法的Colormap方案

加法定义说明 #

可调整变量 #

实验尝试结果 #

代码示例 #

Python生成图像代码 #