Question

我有一个数据uri ，我需要从中获取一个 img标记，该标记引用了一些URL。

我为什么要这样做？

我正在开发一个扩展程序，其中包含Google Docs的叠加层并在其中显示图片。然后，用户应该能够将该图像拖动到文档中以使用它。如果我通过普通的URL将图片包含到一些库存照片中，则一切正常。但是，如果我通过数据uri包含图像，则Google文档将无法加载该图像。

我对解决方案的想法

<img src="http://some-imaginary-host.org/getpng/?data=data:image/png;base64,iVBORw0K...">

此图像标记将包含一个可加载的URL，该URL返回标准的.png文件。该主机不必存储任何数据，只需进行基本（我希望）转换并纠正标头即可。

现在我的问题：

我的想法会在实践中起作用吗，或者有我没有想到的障碍？
有没有一种甚至不需要主机的简便方法？

Answer 1

所以这是我的解决方案：

步骤：

服务器将数据uri转换为正确的url（以下代码）
Chrome扩展脚本通过手动打开对话框来插入图片（老实说，这是我能想到的最好的选择，尽管不好的是其他所有东西都没有用..）

服务器脚本：

<?php
// NOTE: This code is far from perfect, but it does the job (at least in my own-use case)
// NOTE: Parameter has to be sanitized before sending, to avoid url-escaping
// Validate the parameter
if(!preg_match('/data:(.*_.*;base64,[a-zA-Z0-9._-]*)/', $_GET["data"])) {
    die("Not a valid parameter.");
}

// Decode the received url-safe data into valid base64
$convertedUri = strtr($_GET["data"], "._-", "+/=");

// Split the data uri into parts
$uri = explode(";", $convertedUri);

$contentType = explode(":", $uri[0])[1];
$base64 = explode(",", $uri[1])[1];
$data = base64_decode($base64);

// Try to convert the received data into an image
$im = imagecreatefromstring($data);
if ($im !== false) {
    header('Content-Type: '.$contentType);
    echo $data;
    imagedestroy($im);
}
else {
    die("Error: " . $base64);
}
?>

将数据uri图片从扩展程序的content_script拖动到Google文档

1 个答案: