У меня проблемы с отображением SVG-изображения, которое я ранее сохранял в локальной IndexDB.Отображаемое изображение SVG отображается со значком вопросительного знака в Safari и значком неработающей ссылки в Firefox.
В моем приложении HTML пользователь может загружать медиа-файлы любого типа, которые я храню в локальной индексной БД.
Импортировать файл мультимедиа:
<input id="mediafile" type="file" accept="image/jpg, image/jpeg,
image/png, image/gif, image/svg, image/svg+xml, audio/mp3,
audio/mpeg, video/mp4, video/quicktime, capture=camcorder">
На данный момент это нормально работает для всех приемлемых типов мультимедиа.
Сохранение импортированного файла в IndexDB и создание URL-ссылки на него для целей отображения (упрощенно):
if (file) {
// Create reader to store file in DB
reader.readAsArrayBuffer(file); // readAsText // readAsArrayBuffer(file); readAsDataURL
reader.onload = function(e) {
// Browser completed reading file - store it with unique key ID
var uuId = uuidv4();
// Store file in DB
dbStoreFile(uuId, e.target.result)
.then(
function() {
// Get file to create thumbnail (image)
dbGetFileUrl(uuId)
.then(
function(url) {
switch (type) {
case 'image':
url = window.URL.createObjectURL(file);
break;
case 'video':
...
}
// Create thumbnail
var preview = document.createElement('img');
preview.src = url;
preview.width = '60';
preview.height = '60';
// Display thumbnail
var structure = '<div id="' + uuId + '" projectid="' + projectId + '" style="float: left; height: 60px; width: 60px; margin: 5px; border-style: solid; border-width: 1px; border-color: #b1b1b1; border-radius: 5px;"></div>';
$('#mediacontainer' + projectId).append(structure);
$('#mediacontainer' + projectId + ' #' + uuId).append(preview);
// Remove imported file
$('#mediafile').val('');
// Store change in DB
dbStoreFile('project', project);
}
);
}
);
};
}
-> Это прекрасно работает для всех принятых медиафайлов (также SVG) только потому, что я создаю URL-адрес непосредственно из импортированного файла.
Когда я закрываю приложение HTML (или просто перезагружаю его), приложение должно загружать файлы мультимедиа из IndexDB.Это прекрасно работает, за исключением файлов SVG:
function createThumbnail(projectId, uuId, type) {
var mediaTitle = '';
var url = '';
// Get file to create thumbnail (image)
dbGetFileUrl(uuId)
.then(
function(url) {
// Create thumbnail
var preview = document.createElement('img');
preview.src = url;
preview.width = '60';
preview.height = '60';
// Display thumbnail
var structure = '<div id="' + uuId + '" projectid="' + projectId + '" style="float: left; height: 60px; width: 60px; margin: 5px; border-style: solid; border-width: 1px; border-color: #b1b1b1; border-radius: 5px;"></div>';
$('#mediacontainer' + projectId).append(structure);
$('#mediacontainer' + projectId + ' #' + uuId).append(preview);
$('#mediacontainer' + projectId + ' #' + uuId).attr('src', url);
}
);
}
Соответствующее содержимое вызываемой функции dbGetFileUrl:
// Get file blob
var fileBlob = new Blob([request.result.file]); // adding type doesn't help: {type:"image/svg+xml;charset=utf-8"}
// Create URL for blob
var fileURL = window.URL.createObjectURL(fileBlob);
return fileURL;
Я проверил возвращенный URL, который в любом случае выглядит корректно: blob: //https.mypage.com/A5C7DAFE1H....
ThisВремя отображения всех типов мультимедиа, кроме файлов SVG.Вы можете подумать, что сохраненный файл SVG поврежден или что-то в этом роде, но это не так: пользователь может загружать любые медиа-файлы в облако и получать к ним доступ с домашней страницы.Облачный API позволяет мне создавать URL для любого файла в облаке, а затем все загруженные файлы SVG отображаются правильно!
Я предполагаю, что обработка SVG как-то отличается от любых типов носителей (?), Или я проигнорировал что-то простое.Я проверил любые другие проблемы, связанные с отображением файлов SVG в Stackoverflow, но, похоже, ни одна из них не решает эту проблему.Я также пробовал, как 10 различных файлов SVG, но все это не отображается при чтении из indexDB.SVG-файлы не нужно отображать в Canvas для изменения целей.Я просто хочу отобразить его в теге <img> (поскольку это работает для всех других типов изображений).
Файл SVG выглядит одинаково при чтении с помощью функции чтения или при возврате из indexDB:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 26 26" enable-background="new 0 0 26 26" xml:space="preserve">
<g>
<path fill="#000000" d="M14.137,17.766c-1.545,0-3.056-0.564-4.195-1.705c-0.637-0.635-0.637-1.663-0.002-2.298 s1.664-0.635,2.298-0.001c1.11,1.108,3.036,0.988,4.293-0.271l5.013-5.013c0.671-0.668,1.054-1.541,1.054-2.395 c0-0.51-0.136-1.25-0.78-1.896c-0.691-0.692-1.484-0.806-2.038-0.778c-0.817,0.037-1.618,0.41-2.255,1.047L14.649,7.33 c-0.672-0.672-3.433-1.165-4.181-0.416l4.756-4.755c1.21-1.21,2.771-1.919,4.4-1.997c1.699-0.078,3.293,0.533,4.487,1.727 c1.119,1.117,1.735,2.607,1.735,4.195c-0.001,1.71-0.732,3.421-2.008,4.693l-5.012,5.012 C17.516,17.104,15.808,17.766,14.137,17.766z"/>
</g>
<g>
<path fill="#000000" d="M11.863,8.234c1.543,0,3.055,0.564,4.196,1.705c0.636,0.635,0.635,1.663,0,2.298 c-0.634,0.635-1.663,0.635-2.298,0c-1.109-1.107-3.035-0.986-4.293,0.271l-5.013,5.013c-0.67,0.668-1.054,1.541-1.054,2.395 c0,0.508,0.136,1.25,0.781,1.896c0.691,0.69,1.484,0.806,2.038,0.78c0.817-0.039,1.618-0.412,2.255-1.049l2.873-2.872 c0.672,0.671,3.433,1.164,4.182,0.415l-4.756,4.755c-1.209,1.21-2.771,1.919-4.399,1.997c-1.7,0.08-3.294-0.532-4.489-1.727 c-1.119-1.117-1.734-2.607-1.734-4.195c0.001-1.71,0.731-3.421,2.007-4.693l5.012-5.012C8.483,8.898,10.193,8.234,11.863,8.234z"/>
</g>
</svg>
Еще раз: отправленный код работает нормально, только не для файлов SVG, чтобы отобразить их.