Перетащите изображения data-uri из файла content_script расширения в Документы Google. - PullRequest
Новая
       10

Перетащите изображения data-uri из файла content_script расширения в Документы Google.

0 голосов
/ 13 ноября 2018

У меня есть data uri , и мне нужно извлечь из него тег img , который ссылается на некоторый URL.

Зачем мне это делать?

Я разрабатываю расширение, которое содержит наложение на Документы Google и отображает изображение внутри него. Пользователь должен затем перетащить это изображение в документ, чтобы использовать его. Если я добавляю изображение через обычный URL к некоторой фотографии, все работает отлично. Однако, если я включу изображение через URI данных, Google Docs не сможет загрузить это изображение.

Моя идея для решения: 

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

Этот тег изображения будет содержать загружаемый URL-адрес, который возвращает стандартный файл .png. Этому хосту не нужно будет хранить какие-либо данные, достаточно просто выполнить (я надеюсь) преобразование и исправить заголовки.

Теперь мои вопросы:

  • Будет ли моя идея работать на практике или есть какие-то препятствия, о которых я не думал?
  • Есть ли более простой способ сделать это, который может даже не потребовать хоста?

1 Ответ

0 голосов
/ 11 декабря 2018

Итак, вот мое решение:

Шаги:

  • Сервер преобразует данные 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);
}
?>
...