Сохранение большого холста в качестве URI данных после редактирования

Question

Я загрузил файл изображения размером 47 МБ с сервера и отобразил его на холсте для редактирования.

После редактирования, когда я пытаюсь получить URI данных изображения, браузер зависает, а затем спрашивает, должен ли сценарий быть остановлен.

В настоящее время я использую этот код, чтобы получить данные URI:

drawingCanvas.toDataURL("image/png"); 

Это несколько быстрее, чтобы получить данные JPEG URI, но мне нужно файл только формат PNG. Есть ли способ сделать это быстрее?

Answer 1

Этот файл слишком велик для обработки через URI данных. Существуют ограничения в разных браузерах, см. Data protocol URL size limitations

Вы можете попытаться опубликовать кодированные данные base64 на свой сервер, декодировать и получить обычное изображение. Упрощенное решение представлено на PHP, но среда не имеет значения.

list($type, $data) = explode(';', $_POST['data']); 
list(, $base64) = explode(',', $data); 
unset($data); 
$decoded = base64_decode($base64, true); 
unset($base64); 

if (false !== $decoded) { 
    header('Content-type: ' . $type); 
    header('Content-Disposition: attachment; filename="file.png"'); 
    header('Cache-Control: max-age=0'); 
    echo $decoded; 
} else { 
    header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500); 
} 

Answer 2

Нет, к сожалению. PNG-кодирование - относительный медленный процесс сам по себе (вы можете видеть это с большими изображениями, сохраненными в таких приложениях, как Photoshop).

Единственный эффективный способ ускорить работу - уменьшить размер растрового изображения canvas, который вы хотите кодировать - браузер не является оптимальным инструментом для обработки больших данных, таких как большие файлы изображений (размерные размеры), и они никогда не хотел делать подобные вещи.

Разбивка нарезанных фрагментов может помочь вам разблокировать пользовательский интерфейс. Но поскольку вы не можете кодировать их параллельно, и есть накладные расходы на создание кодированных данных Base-64, вам нужно будет использовать async setTimeout, чтобы дать браузеру некоторое время проанализировать очередь событий между каждым срезом и, конечно же, вам нужно было бы скомпоновать их в какой-то момент, где-то, так что это сделало бы его медленнее, более подверженным ошибкам и более сложным все-в-одном (сложный не нужен плохо, хотя в таких случаях). Вероятно, это ваш лучший выбор, хотя если уменьшить размер растрового изображения, это не вариант. И, как указывает Макс, существуют ограничения по размеру для данных-урис.

Вы можете сбросить необработанный буфер, используя getImageData(), но затем вы получите буфер необработанного размера, который имеет цепочку других последствий.

Общие веб-работники могут теоретически делать кодирование параллельно, но, скорее всего, будут намного медленнее, чем позволить браузеру делать это в скомпилированном коде. Вам также нужно будет предоставить код для кодирования ... И, как и во многих новых вещах, у него пока нет полной или полной поддержки.