Если вы помните, пару месяцев назад в моих сообщениях о LastWave я упомянул, что одной из двух больших проблем при создании LastWave была возможность передать пользователю SVG. На момент написания этого поста моим лучшим решением было использование «Chrome SVG-ломика», который, хотя и решал проблему, явно не был идеальным решением и оставил меня неудовлетворенным. С тех пор я возился с преобразованием SVG и сохранением файлов и случайно наткнулся на ловкий трюк, который позволил мне (частично) преодолеть проблемы, которые у меня были.
$("#svg_dl").html($("‹a title="file.svg" href="data:image/svg+xml;base64,\n'+graph_data.base64+'" download="svg.svg ”›‹button class="btn btn-primary"›Загрузить векторный SVG‹/button›‹/a›”));
Это определенно немного взлома. По сути, вы делаете следующее:
1. Возьмите уже созданный в браузере SVG и конвертируйте его в base64 (я использую Base64.encode() из http://www.webtoolkit.info/javascript-base64.html) 2. Теперь возьмите этот текст base64 и вставьте его вручную в тег ‹a›, сообщая браузеру, что вы будете загружать из него файл с именем svg.svg 3. Когда вы щелкнете по этой ссылке, браузер возьмет эту информацию base64 и загрузит ее в файл с именем svg, таким образом предоставляя конечному пользователю svg файла.
Подлый, да?
Я знаю, что это также кажется идеальным решением. Но, к сожалению, у него есть одна большая проблема. Поскольку все это делается на стороне клиента (как и все остальное в LastWave), Chrome и другие браузеры аварийно завершают работу или зависают, если размер изображения слишком велик. К сожалению, «слишком большой» — это даже график годовой истории прослушивания, который является одним из ориентиров, которые я пытался предложить. Поэтому в настоящее время я рассматриваю возможность сделать шаг в том направлении, в котором изначально не хотел идти: обрабатывать загрузку файлов на стороне сервера.
Я сделаю пост, когда и если я добьюсь прогресса в этом.
Первоначально опубликовано на savas.ca.
