Question

从html中查找所有图像并将其转换为base64

我正在使用html2canvas处理截图项目。我的业务受到无法呈现的图像的限制，因此无法显示来自网址的所有图片。

但是我尝试用已经转换为base64的新图像替换其中一个图像网址，它可以正常工作。

所以在这里我找到了解决方案，只是不能申请我的网站。我需要帮助来编译代码才能完成我的项目。

有没有办法更改此代码：

<?php
echo '
<html>
<body>
<div><img src="/image1.jpg" /></div>
<p><img src="/image2.png" /></p>
</body>
</html>
'
?>

以

<?php
echo '
<html>
<body>
<div><img src="base64,/9j/4AAQSkZJRgABAQAAAQABAA_blablabla..." /></div>
<p><img src="base64,/9h/4AAQSkZJRgABAQAAAQABAA_blablabla..." /></p>
</body>
</html>
'
?>

我已尝试使用此代码FROM How to convert an image to base64 encoding?

$path = 'myfolder/myimage.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

但无法将其应用于所有图片网址。

UPDATE ===

这个问题的主题是如何将所有图像转换为base64

我假设如果使用这样的jQuery它是如何工作的：

<script>
$(function(){
    $('img').each(function() {
        $(this).attr('src', 'BASE64 GENERATED');
    });
});
</script>

Answer 1

最好的做法是DOMDocument，这是一个如何做到这一点的例子。

$html = '<html>....</html>';
$dom = new DOMDocument();
$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
$images = $dom->getElementsByTagName('img');
foreach ($images as $image) {
        $src = $image->getAttribute('src');
        $type = pathinfo($src, PATHINFO_EXTENSION);
        $data = file_get_contents($src);
        $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
        $image->setAttribute("src", $base64); 
}
$html = $dom->saveHTML();

从html

1 个答案: