在 TCPDF 中渲染来自 POST 请求的 Base64 图像时出现问题

Question

我有一个base64编码的图像：

var croppedMap = croppedCanvas.toDataURL('image/png');
var form = document.createElement('form');
                    form.setAttribute('method', 'post');
                    form.setAttribute('action', 'pdf/generate.php');
                    form.setAttribute('target', '_blank');


var input2 = document.createElement('input');
                    input2.setAttribute('type', 'hidden');
                    input2.setAttribute('name', 'MAP');
                    input2.setAttribute('value', croppedMap);
                    form.appendChild(input2);
                    document.body.appendChild(form);
                    form.submit();

                    document.body.removeChild(form);

我正在尝试使用 TCPDF 渲染它。我从 POST 请求中获取此图像：

$mapData = isset($_REQUEST['MAP']) ? $_REQUEST['MAP'] : '';
$mapData = "@".preg_replace('#^data:image/[^;]+;base64,#', '', $mapData);
$img = '<img src="' . $mapData . '">';

然后，我将图像分配给 HTML 变量，如下所示：

$html = '...<td rowspan="2" style="height: 50%;">'. $img .'</td>...';
$pdf->writeHTML($html, true, false, true, false, '');

//Close and output PDF document
$pdf->Output('pdf-file.pdf', 'I');

但是，尽管确认图像已设置，但图像并未渲染。当我直接在代码中设置图像时（例如： $img = '@iVBORw0KGgoAAAANSUhEUgAAA0gA...'），它可以工作。该问题似乎仅在我从 POST 请求中检索它时才会发生。关于为什么它不起作用有什么建议吗？

Answer 1

从 POST 请求获取图像数据后，您需要从 Base64 字符串中剥离数据 URI 部分 (

data:image/png;base64,

)。这可以使用

preg_replace

来完成。然后，直接在

img

标签中使用这个干净的 base64 字符串：

$mapData = isset($_REQUEST['MAP']) ? $_REQUEST['MAP'] : '';
$mapData = base64_encode(preg_replace('#^data:image/\w+;base64,#i', '', $mapData));
$img = '<img src="data:image/png;base64,' . $mapData . '">';

注意：您不需要在base64字符串前添加任何额外的符号，例如

@

；只需在

src

标签的

img

属性中使用它即可。