Перетащите изображения data-uri из файла content_script расширения в Документы Google.
у меня есть данные URI и мне нужно получить тег img из этого, который ссылается на какой-то URL.
Зачем мне это делать?
Я разрабатываю расширение, которое содержит наложение на Google Docs и отображает изображение внутри него. Пользователь должен затем перетащить это изображение в документ, чтобы использовать его. Если я добавляю изображение через обычный URL к некоторой фотографии, все работает отлично. Однако, если я включу изображение через URI данных, Google Docs не сможет загрузить это изображение.
Моя идея для решения:
<img src="http://some-imaginary-host.org/getpng/?data=data:image/png;base64,iVBORw0K...">
Этот тег изображения будет содержать загружаемый URL-адрес, который возвращает стандартный файл .png. Этому хосту не нужно будет хранить какие-либо данные, достаточно просто выполнить (я надеюсь) преобразование и исправить заголовки.
Теперь мои вопросы:
- Будет ли моя идея работать на практике или есть какие-то препятствия, о которых я не думал?
- Есть ли более простой способ сделать это, который может даже не потребовать хост?
Решение
Итак, вот мое решение:
шаги:
-
Сервер преобразует данные URI в правильный URL-адрес (код ниже)
-
Chrome Extension Script вставляет изображение, открывая диалоговые окна вручную (это, честно говоря, лучшая вещь, которую я мог придумать, хотя это плохо, все остальное не работало …)
Серверный скрипт:
<?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);
}
?>
Другие решения
Других решений пока нет …