Question

我很难显示以前存储在本地IndexDB中的SVG图像。显示的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文件，除EXPT之外，这都可以正常工作：

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 ....

这一次将显示所有媒体类型，但不包括SVG文件。您可能会认为所存储的SVG文件已损坏或类似的损坏，但事实并非如此：用户可以将任何媒体文件上传到云中并从主页访问这些文件。云API允许我为云中的任何文件创建URL，然后正确显示所有上传的SVG文件！

我认为SVG处理与任何其他媒体类型（？）有所不同，或者我忽略了一些简单的内容。我检查了在Stackoverflow中显示SVG文件的其他问题，但似乎没有一个问题可以解决。我还尝试了10种不同的SVG文件，但是从indexDB读取时都没有显示它。 SVG文件不需要在Canvas中显示即可进行修改。我只想在<img>标签中显示它（因为它适用于所有其他图像类型）。

通过阅读器功能读取或从indexDB返回时，SVG文件看起来完全相同：

<?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文件。

如何显示源自IndexedDB的SVG图像？

0 个答案: