在PHP中呈现具有透明前景的彩色背景

当MP3上传到服务器时，我正在动态地直接渲染MP3中的音频波形。我的上传脚本当前保存原始mp3并将波形渲染为png

当前，我首先将背景渲染为矩形。此代码根据$background的值生成透明或彩色背景：

我正在尝试用PHP创建一个透明的png覆盖

if (!$img) {
        // create original image width based on amount of detail
                // each waveform to be processed with be $height high, but will be condensed
                // and resized later (if specified)
        $img = imagecreatetruecolor($data_size / DETAIL, $height * sizeof($wavs_to_process));

        // fill background of image
        if ($background == "") {
          // transparent background specified
          imagesavealpha($img, true);
          $transparentColor = imagecolorallocatealpha($img, 0, 0, 0, 127);
          imagefill($img, 0, 0, $transparentColor);
        } else {
          list($br, $bg, $bb) = html2rgb($background);
          imagefilledrectangle($img, 0, 0, (int) ($data_size / DETAIL), $height * sizeof($wavs_to_process), imagecolorallocate($img, $br, $bg, $bb));
        }
      }

然后，我循环通过一个动态重新采样的MP3的数据点，对于每个点，我在这个背景上画一条线来渲染波形图像

我使用此代码生成波形图像：

 // don't print flat values on the canvas if not necessary
          if (!($v / $height == 0.5 && !$draw_flat))
            // draw the line on the image using the $v value and centering it vertically on the canvas
            imageline(
              $img,
              // x1
              (int) ($data_point / DETAIL),
              // y1: height of the image minus $v as a percentage of the height for the wave amplitude
              $height * $wav - $v,
              // x2
              (int) ($data_point / DETAIL),
              // y2: same as y1, but from the bottom of the image
              $height * $wav - ($height - $v),
              imagecolorallocate($img, $r, $g, $b)
            );      

        } else {
          // skip this one due to lack of detail
          fseek($handle, $ratio + $byte, SEEK_CUR);
        }
      }

这非常有效，但是我需要创建一个透明覆盖的波形，以便将其放置在具有CSS渐变的div上。因此，我需要将背景渲染为#ffffff，实际波形本身需要透明。本质上，我需要在制作的png上反转透明度

我试过使用：

imagecolorallocatealpha($img, 0, 0, 0, 127)

在波形渲染部分，但似乎总是以一个没有可见波形的彩色矩形结束，我不确定哪里出了问题

任何帮助都将不胜感激。

请尝试以下方法。对于图像：

imagealphablending($img, FALSE);

这将允许您直接使用alpha信息设置像素。要执行此操作，您还需要设置为100%透明：

imagecolorallocatealpha($img ,$r, $g, $b, $alpha = 127);

顺便说一句，您可以分配颜色一次，然后重新使用它，因此您不需要经常调用

imagecoloralocallocatealpha

函数

让我知道这是否有效。

请尝试以下方法。对于图像：

imagealphablending($img, FALSE);

这将允许您直接使用alpha信息设置像素。要执行此操作，您还需要设置为100%透明：

imagecolorallocatealpha($img ,$r, $g, $b, $alpha = 127);

顺便说一句，您可以分配颜色一次，然后重新使用它，因此您不需要经常调用

imagecoloralocallocatealpha

函数

---

让我知道这是否有效。

您是否考虑过使用HTML

canvas

元素而不是渲染到图像？与其说是一个建议，不如说是一个想法。我理解你的意思是，你先把所有的都填满，然后想“去掉”波形中的像素，使那个部分再次透明吗？这是正确的。我甚至不确定这是否可行，当然我也愿意接受其他建议。@Treffynnon此应用程序要求几个div的位置高于实际波形，如果我了解html画布元素的工作方式，这将使此方法很麻烦。@gordyr:作为答案添加的建议应该可以做到。我想在网站完成后看看，昨天已经很有趣了；）您是否考虑过使用HTML

canvas

元素而不是渲染到图像？与其说是一个建议，不如说是一个想法。我理解你的意思是，你先把所有的都填满，然后想“去掉”波形中的像素，使那个部分再次透明吗？这是正确的。我甚至不确定这是否可行，当然我也愿意接受其他建议。@Treffynnon此应用程序要求几个div的位置高于实际波形，如果我了解html画布元素的工作方式，这将使此方法很麻烦。@gordyr:作为答案添加的建议应该可以做到。我想在网站完成后看看，昨天已经很有趣了；）完美的我只是错过了我必须先禁用alpha混合。现在工作得很好。再一次，非常感谢你，哈克雷。这是一个非常有趣和雄心勃勃的项目。它让我在多个领域走出了开发/用户界面工程的舒适区，给了我一个巨大的机会去学习我本来永远不会学到的东西。完成后，我一定会给你发一个链接。无论如何，我相信我会有更多的问题。干杯！：-）完美的我只是错过了我必须先禁用alpha混合。现在工作得很好。再一次，非常感谢你，哈克雷。这是一个非常有趣和雄心勃勃的项目。它让我在多个领域走出了开发/用户界面工程的舒适区，给了我一个巨大的机会去学习我本来永远不会学到的东西。完成后，我一定会给你发一个链接。无论如何，我相信我会有更多的问题。干杯！：-）