Question

我有一个<image> svg，由另一个系统生成我的目标是在将所有图像和字体文件渲染到新窗口后弹出打印对话框。

我尝试了很多方法，发现浏览器没有正确实现svg w3标准，例如我尝试使用url调用的图像但下面的代码＆＃39; onload＆＃39;事件偶尔会发生一些模糊的回答说是因为浏览器缓存了图像，所以我尝试将随机查询字符串附加到图像上;这也没用。

我在阳光下尝试了一切，现在我试图将base64图像嵌入到文件中，看看它是否强制浏览器同步加载图像？

问题是，是否可以强制浏览器首先使用base64图像渲染图像？我主要关心Chrome浏览器。

var svgFile = `<svg>
<image externalResourcesRequired="true" id="testImage" x="-600" y="2040" height="100px" width="100px" xlink:href=""/>
</svg>`;


var win = window.open();

win.document.write('<style type="text/css">body{margin: 0;padding: 0}  </style>');
    win.document.write('<style type="text/css" media="print">@page {size: auto; margin: 0mm;}</style>');
win.document.write(svgFile);


var testImage = win.document.getElementById('testImage');

testImage.onload = function () { //after image is fully loaded
  win.focus(); //necessary for IE >= 10
  win.print();
  win.close();
  return true;
}

var imageInBase64 = 'iVBORw0KGgoAAA...';
testImage.setAttribute('xlink:href', imageInBase64);

我还尝试了下面的代码，看看渲染是否赶上javascript执行（把它放在事件队列中），但它似乎不起作用。

setTimeout(function(){ 
   win.focus(); //necessary for IE >= 10
   win.print();
   win.close();
   return true;
}, 0);

另一件事，我在某处读到了onload事件不会为生成的svg代码触发，除非它被浏览器直接解析。

在base64中编码图像是否同步加载svg <img/>？

0 个答案: