Question

我有一个有很多输出的应用程序。其中一个是HTML报告。处理的结果是很多信息，包括1个大图像和一些较小的图像。

我一直将它们嵌入到HTML文档中，因此报告是一个可以轻松共享的文件。使用data:image/png;base64,...进行嵌入有效，但与外部链接图像相比，加载速度极慢。

是否有另一种方法可以将图像嵌入到更具响应性的HTML文档中？

Answer 1

您可以考虑使用画布加载图像。

使用AJAX Call

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  function loadCanvas(dataURL) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // load image from data url
    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(this, 0, 0);
    };

    imageObj.src = dataURL;
  }

  // make ajax call to get image data url
  var request = new XMLHttpRequest();
  request.open('GET', 'http://www.html5canvastutorials.com/demos/assets/dataURL.txt', true);
  request.onreadystatechange = function() {
    // Makes sure the document is ready to parse.
    if(request.readyState == 4) {
      // Makes sure it's found the file.
      if(request.status == 200) {
        loadCanvas(request.responseText);
      }
    }
  };
  request.send(null);
</script>

Answer 2

没有其他方法可以在HTML 中嵌入图像。另一个常见选项是使用大多数Web浏览器可以读取/创建的MHTML文件（参见另请参阅部分，了解单个文件选项中的其他offline-html），但是MHTML而close并不是真正的HTML。

这让我想到：
如果要求是在单个文件中生成报告，而带有数据URL的HTML不会将其删除。那么，也许你应该考虑其他格式（咳嗽 PDF 咳嗽）。用于将HTML转换为其他格式的开源库随时可用。

假设图像是图表的另一个选择是使用CSS来渲染它们而不是生成图像，但这肯定会更加困难，并且需要更改报告生成器。

Answer 3

尝试这样的事情（CSS / jQuery）：

.img {
    background: url(arrow.png) no-repeat;
}

$("<img src='your-image.png'/>").prependTo(".img");

将图像嵌入HTML而不是数据URI的其他方法

3 个答案: