0

我有这段代码在 Chromium 和 Firefox 中运行良好，但 Opera 不会触发加载事件，因为它无法处理图像数据。如果我将数据设置为常规 jpeg，它可以正常工作，但不适用于 svg。有什么解决办法吗？

var img = new Image();

var that = this;

img.onload = function(){ onCacheCreated.call( that, img ); }

img.src = "data:image/svg+xml;base64," 
    + btoa( ( new XMLSerializer() ).serializeToString( this._dom ) );
4

1 回答 1

0

嗯，这里展示了相当有趣的行为范围。

使它特别有趣的部分是它实际上可以加载 SVG。我尝试将其作为附加到的 base64 编码字符串和附加到"data:image/svg+xml;base64," 的纯文本"data:image/svg+xml,"

“整洁”的部分是 - onload 事件永远不会触发。但是，如果我们创建一个 img 元素并将其添加到页面中，我们可以看到它在加载时显示。但同样，我们从来没有从它那里得到一个 onload 事件。

更奇怪的是：当我使用带有透明阴影、渐变和模糊的徽标时，渐变、模糊和阴影不起作用，但仅在以纯文本形式发送时。

更奇怪的是，Chrome 显示它们的方式相同，IE9 仅显示 base64 版本，Opera 显示两者，但外观截然不同。

也许您可以设置一个间隔计时器，然后检查正在加载的 img 元素的尺寸。有人会假设它们在加载之前和之后会有所不同。我必须检查这是否是处理（从未触发的）onload 事件的可行替代方案。

这是我使用的代码：

<!DOCTYPE>
<html>
<head>
<style>
</style>
<script>
function myInit()
{
    var img = new Image();
    document.body.appendChild(img);
    var imgStr = "data:image/svg+xml;base64,";
    imgStr += "PHN2ZwogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9Ijg1IgogICBoZWlnaHQ9Ijg1Igo+CiAgPGRlZnMKICAgICBpZD0iZGVmczQxNzIiPgogICAgPHJhZGlhbEdyYWRpZW50CiAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICB4bGluazpocmVmPSIjbGluZWFyR3JhZGllbnQ0ODk5IgogICAgICAgaWQ9InJhZGlhbEdyYWRpZW50NDkwNyIKICAgICAgIGN4PSIyMTkuNjM0MzIiCiAgICAgICBjeT0iNTMuNDk5Mjc5IgogICAgICAgZng9IjIxOS42MzQzMiIKICAgICAgIGZ5PSI1My40OTkyNzkiCiAgICAgICByPSIxNS44OTA2MjUiCiAgICAgICBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0zLjI3ODMwMzMsLTAuNzI4NTMzODUsMC42OTk5NTM0NCwtMy4xNDk2OTU0LDczOS4xNzMyMSwzNDUuMzE5OTUpIgogICAgICAgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIC8+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlkPSJsaW5lYXJHcmFkaWVudDQ4OTkiPgogICAgICA8c3RvcAogICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojMDAwMDAwO3N0b3Atb3BhY2l0eToxOyIKICAgICAgICAgb2Zmc2V0PSIwIgogICAgICAgICBpZD0ic3RvcDQ5MDEiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNmN2I0YjQ7c3RvcC1vcGFjaXR5OjE7IgogICAgICAgICBvZmZzZXQ9IjEiCiAgICAgICAgIGlkPSJzdG9wNDkwMyIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHhsaW5rOmhyZWY9IiNsaW5lYXJHcmFkaWVudDQ5MTQiCiAgICAgICBpZD0ibGluZWFyR3JhZGllbnQ0OTIwIgogICAgICAgeDE9IjIxNi43MTc0NSIKICAgICAgIHkxPSItNTIuMDQ4NTUzIgogICAgICAgeDI9IjIxNS44MDM0NyIKICAgICAgIHkyPSI4NS4xNDE1MjUiCiAgICAgICBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgICAgIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE2NS4yNTk1MSwtMTUuOTQ2NDM5KSIgLz4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICAgaW5rc2NhcGU6Y29sbGVjdD0iYWx3YXlzIgogICAgICAgaWQ9ImxpbmVhckdyYWRpZW50NDkxNCI+CiAgICAgIDxzdG9wCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiNmZmZmZmY7c3RvcC1vcGFjaXR5OjE7IgogICAgICAgICBvZmZzZXQ9IjAiCiAgICAgICAgIGlkPSJzdG9wNDkxNiIgLz4KICAgICAgPHN0b3AKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6I2ZmZmZmZjtzdG9wLW9wYWNpdHk6MDsiCiAgICAgICAgIG9mZnNldD0iMSIKICAgICAgICAgaWQ9InN0b3A0OTE4IiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxmaWx0ZXIKICAgICAgIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIGlkPSJmaWx0ZXI1MDk2Ij4KICAgICAgPGZlR2F1c3NpYW5CbHVyCiAgICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgICAgc3RkRGV2aWF0aW9uPSIwLjU1NjQ1NjM3IgogICAgICAgICBpZD0iZmVHYXVzc2lhbkJsdXI1MDk4IiAvPgogICAgPC9maWx0ZXI+CiAgICA8ZmlsdGVyCiAgICAgICBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiCiAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICBpZD0iZmlsdGVyNTA3NiI+CiAgICAgIDxmZUdhdXNzaWFuQmx1cgogICAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICAgIHN0ZERldmlhdGlvbj0iMS4yNTA3OTMzIgogICAgICAgICBpZD0iZmVHYXVzc2lhbkJsdXI1MDc4IiAvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDQ5MjIiCiAgICAgICBkPSJtIDIzLjc3MDQ2Nyw1MC42ODQxNTEgYyAtMTYuNzUxNzcwMiwyLjA0NzggLTI0LjM4NTkyMDIzLDExLjExMTMgLTE3LjA4NDI5MDIsMjAuMjM1NSA3LjMwMTYyMDIsOS4xMjQxIDI2Ljc3ODgwMDIsMTQuODU5NyA0My41MzA1NzAyLDEyLjgxMiAxNi43NTE3NywtMi4wNDc3IDI0LjQyNzMsLTExLjEwMjQgMTcuMTI1NjgsLTIwLjIyNjYgLTcuMzAxNjMsLTkuMTI0MiAtMjYuODIwMTksLTE0Ljg2ODYgLTQzLjU3MTk2LC0xMi44MjA5IHogbSAwLjcxOTcsMC44OTk0IGMgOC43NjMzNCwtMS4wNzEyIDIxLjQ5MjUsNS4wNDYzIDI4LjQwNDYyLDEzLjY3MzcgbCAtMTUuODk2MTEsMS45NTcgMTUuOTA2MjUsLTEuOTQ0NCBjIDYuOTA4ODksOC42MzM0IDUuMzcwNzYsMTYuNTAzMyAtMy4zOTc3NCwxNy41NzUxIC04Ljc2ODUsMS4wNzE5IC0yMS40NzQ2MiwtNS4wNTY3IC0yOC4zODM1MSwtMTMuNjkwMSAtNi45MDg4OSwtOC42MzM1IC01LjQwMjAxLC0xNi40OTk1IDMuMzY2NDksLTE3LjU3MTMgeiIKICAgICAgIHN0eWxlPSJvcGFjaXR5OjAuMzE4NTg0MDc7ZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO2ZpbHRlcjp1cmwoI2ZpbHRlcjUwNzYpIgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgICAgZD0ibSA1MC4zNjU0OTcsMi41MjIzMDA2IGMgLTE2Ljc1MTc3LDAgLTMwLjMxMjUsMTguMjcxMDcwNCAtMzAuMzEyNSw0MC43ODEyNTA0IDAsMjIuNTEwMiAxMy41NjA3Myw0MC43NSAzMC4zMTI1LDQwLjc1IDE2Ljc1MTc3LDAgMzAuMzQzNzUsLTE4LjIzOTggMzAuMzQzNzUsLTQwLjc1IDAsLTIyLjUxMDE4IC0xMy41OTE5OCwtNDAuNzgxMjUwNCAtMzAuMzQzNzUsLTQwLjc4MTI1MDQgeiBtIDAsMi4yMTg3NSBjIDguNzYzMzQsMCAxNS44OTg5NSwxNy4yNDQzOTA0IDE1LjkwNjI1LDM4LjUzMTMwMDQgbCAtMTUuOTA2MjUsMC4wMzEgMTUuOTA2MjUsMCBjIDAsMjEuMjk5NCAtNy4xMzc3NSwzOC41NjI1IC0xNS45MDYyNSwzOC41NjI1IC04Ljc2ODUsMCAtMTUuODc1LC0xNy4yNjMxIC0xNS44NzUsLTM4LjU2MjUgMCwtMjEuMjk5NDYgNy4xMDY1LC0zOC41NjI1NTA0IDE1Ljg3NSwtMzguNTYyNTUwNCB6IgogICAgICAgaWQ9InBhdGg0ODg3IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDp1cmwoI3JhZGlhbEdyYWRpZW50NDkwNyk7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBkPSJtIDUwLjM2NTQ5Nyw0Ljc0MTA1MDYgYyAtOC43Njg1LDAgLTE1Ljg3NSwxNy4yNjMwOTA0IC0xNS44NzUsMzguNTYyNTAwNCAwLDIxLjI5OTQgNy4xMDY1LDM4LjU2MjUgMTUuODc1LDM4LjU2MjUgOC43Njg1LDAgMTUuOTA2MjUsLTE3LjI2MzEgMTUuOTA2MjUsLTM4LjU2MjUgbCAtMi4zNzUsMCBjIDAsMjAuMjg1MyAtNi4wNzE0OCwzNi43MTg4IC0xMy41MzEyNSwzNi43MTg4IC03LjQ1OTc3LDAgLTEzLjUsLTE2LjQzMzUgLTEzLjUsLTM2LjcxODggMCwtMjAuMjg1MzQgNi4wNDAyMywtMzYuNzUwMDAwNCAxMy41LC0zNi43NTAwMDA0IDcuNDU1MzgsMCAxMy41MjUwNCwxNi40NDUzNzA0IDEzLjUzMTI1LDM2LjcxODgwMDQgbCAyLjM3NSwwIGMgLTAuMDA3LC0yMS4yODY5MSAtNy4xNDI5MSwtMzguNTMxMzAwNCAtMTUuOTA2MjUsLTM4LjUzMTMwMDQgeiIKICAgICAgIGlkPSJwYXRoNDg5MSIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6dXJsKCNsaW5lYXJHcmFkaWVudDQ5MjApO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO2ZpbHRlcjp1cmwoI2ZpbHRlcjUwOTYpIgogICAgICAgZD0ibSA1MC4zNjU0OTcsMi41MjIzMDA2IGMgLTE2Ljc1MTc3LDAgLTMwLjMxMjUsMTguMjcxMDcwNCAtMzAuMzEyNSw0MC43ODEyNTA0IDAsMi42Mzc5IDAuMjA2NzMsNS4yMjA2IDAuNTYyNSw3LjcxODggNC41MDE2NCwzLjg3NTMgOS43MTMwOSw2LjkwODIgMTUuNDM3NSw4LjgxMjUgLTAuOTgzODQsLTUuMDE4MSAtMS41NjI1LC0xMC42MDI0IC0xLjU2MjUsLTE2LjUzMTMgMCwtMjEuMjk5NDEgNy4xMDY1LC0zOC41NjI1MDA0IDE1Ljg3NSwtMzguNTYyNTAwNCA4Ljc2MzM0LDAgMTUuODk4OTUsMTcuMjQ0MzkwNCAxNS45MDYyNSwzOC41MzEzMDA0IGwgLTE1LjkwNjI1LDAuMDMxIDE1LjkwNjI1LDAgYyAwLDUuOTI3NiAtMC41NDQzMSwxMS41MTM5IC0xLjUzMTI1LDE2LjUzMTIgNS43MTYzNiwtMS45MDQ2IDEwLjk0MTI3LC00Ljk0MTggMTUuNDM3NSwtOC44MTI1IDAuMzU2NTMsLTIuNDk4MSAwLjUzMTI1LC01LjA4MDggMC41MzEyNSwtNy43MTg3IDAsLTIyLjUxMDIzIC0xMy41OTE5OCwtNDAuNzgxMzAwNCAtMzAuMzQzNzUsLTQwLjc4MTMwMDQgeiIKICAgICAgIGlkPSJwYXRoNDkwOSIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+CiAgPC9nPgo8L3N2Zz4K";
    img.src = imgStr;

    img = new Image();
    document.body.appendChild(img);
    var imgStr = "data:image/svg+xml,";
    imgStr += '<svg   xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"   width="85"   height="85">  <defs     id="defs4172">    <radialGradient       inkscape:collect="always"       xlink:href="#linearGradient4899"       id="radialGradient4907"       cx="219.63432"       cy="53.499279"       fx="219.63432"       fy="53.499279"       r="15.890625"       gradientTransform="matrix(-3.2783033,-0.72853385,0.69995344,-3.1496954,739.17321,345.31995)"       gradientUnits="userSpaceOnUse" />    <linearGradient       id="linearGradient4899">      <stop         style="stop-color:#000000;stop-opacity:1;"         offset="0"         id="stop4901" />      <stop         style="stop-color:#f7b4b4;stop-opacity:1;"         offset="1"         id="stop4903" />    </linearGradient>    <linearGradient       inkscape:collect="always"       xlink:href="#linearGradient4914"       id="linearGradient4920"       x1="216.71745"       y1="-52.048553"       x2="215.80347"       y2="85.141525"       gradientUnits="userSpaceOnUse"       gradientTransform="translate(-165.25951,-15.946439)" />    <linearGradient       inkscape:collect="always"       id="linearGradient4914">      <stop         style="stop-color:#ffffff;stop-opacity:1;"         offset="0"         id="stop4916" />      <stop         style="stop-color:#ffffff;stop-opacity:0;"         offset="1"         id="stop4918" />    </linearGradient>    <filter       color-interpolation-filters="sRGB"       inkscape:collect="always"       id="filter5096">      <feGaussianBlur         inkscape:collect="always"         stdDeviation="0.55645637"         id="feGaussianBlur5098" />    </filter>    <filter       color-interpolation-filters="sRGB"       inkscape:collect="always"       id="filter5076">      <feGaussianBlur         inkscape:collect="always"         stdDeviation="1.2507933"         id="feGaussianBlur5078" />    </filter>  </defs>  <g     inkscape:label="Layer 1"     inkscape:groupmode="layer"     id="layer1">    <path       id="path4922"       d="m 23.770467,50.684151 c -16.7517702,2.0478 -24.38592023,11.1113 -17.0842902,20.2355 7.3016202,9.1241 26.7788002,14.8597 43.5305702,12.812 16.75177,-2.0477 24.4273,-11.1024 17.12568,-20.2266 -7.30163,-9.1242 -26.82019,-14.8686 -43.57196,-12.8209 z m 0.7197,0.8994 c 8.76334,-1.0712 21.4925,5.0463 28.40462,13.6737 l -15.89611,1.957 15.90625,-1.9444 c 6.90889,8.6334 5.37076,16.5033 -3.39774,17.5751 -8.7685,1.0719 -21.47462,-5.0567 -28.38351,-13.6901 -6.90889,-8.6335 -5.40201,-16.4995 3.36649,-17.5713 z"       style="opacity:0.31858407;fill:#000000;fill-opacity:1;stroke:none;filter:url(#filter5076)"       inkscape:connector-curvature="0" />    <path       style="fill:#ff0000;fill-opacity:1;stroke:none"       d="m 50.365497,2.5223006 c -16.75177,0 -30.3125,18.2710704 -30.3125,40.7812504 0,22.5102 13.56073,40.75 30.3125,40.75 16.75177,0 30.34375,-18.2398 30.34375,-40.75 0,-22.51018 -13.59198,-40.7812504 -30.34375,-40.7812504 z m 0,2.21875 c 8.76334,0 15.89895,17.2443904 15.90625,38.5313004 l -15.90625,0.031 15.90625,0 c 0,21.2994 -7.13775,38.5625 -15.90625,38.5625 -8.7685,0 -15.875,-17.2631 -15.875,-38.5625 0,-21.29946 7.1065,-38.5625504 15.875,-38.5625504 z"       id="path4887"       inkscape:connector-curvature="0" />    <path       style="fill:url(#radialGradient4907);fill-opacity:1;stroke:none"       d="m 50.365497,4.7410506 c -8.7685,0 -15.875,17.2630904 -15.875,38.5625004 0,21.2994 7.1065,38.5625 15.875,38.5625 8.7685,0 15.90625,-17.2631 15.90625,-38.5625 l -2.375,0 c 0,20.2853 -6.07148,36.7188 -13.53125,36.7188 -7.45977,0 -13.5,-16.4335 -13.5,-36.7188 0,-20.28534 6.04023,-36.7500004 13.5,-36.7500004 7.45538,0 13.52504,16.4453704 13.53125,36.7188004 l 2.375,0 c -0.007,-21.28691 -7.14291,-38.5313004 -15.90625,-38.5313004 z"       id="path4891"       inkscape:connector-curvature="0" />    <path       style="fill:url(#linearGradient4920);fill-opacity:1;stroke:none;filter:url(#filter5096)"       d="m 50.365497,2.5223006 c -16.75177,0 -30.3125,18.2710704 -30.3125,40.7812504 0,2.6379 0.20673,5.2206 0.5625,7.7188 4.50164,3.8753 9.71309,6.9082 15.4375,8.8125 -0.98384,-5.0181 -1.5625,-10.6024 -1.5625,-16.5313 0,-21.29941 7.1065,-38.5625004 15.875,-38.5625004 8.76334,0 15.89895,17.2443904 15.90625,38.5313004 l -15.90625,0.031 15.90625,0 c 0,5.9276 -0.54431,11.5139 -1.53125,16.5312 5.71636,-1.9046 10.94127,-4.9418 15.4375,-8.8125 0.35653,-2.4981 0.53125,-5.0808 0.53125,-7.7187 0,-22.51023 -13.59198,-40.7813004 -30.34375,-40.7813004 z"       id="path4909"       inkscape:connector-curvature="0" />  </g></svg>';
    img.src = imgStr;
}
</script>
</head>
<body onload='myInit();'>

</body>
</html>
于 2012-10-06T14:15:33.200 回答