svg to canvas - opera

我有这个代码可以在Chromium和Firefox中正常工作，但Opera不会触发加载事件，因为它无法处理图像数据。如果我将数据设置为常规jpeg，它可以正常工作，但不能与svg一起使用。有没有修复？svg to canvas - opera

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));

来源

2012-10-06 philipp

在这里看到一个小提琴：http://jsfiddle.net/TtEvM/3/（其他城市IMG SRC至JPG/PNG等看到在Opera画布图像） – enhzflep

嗯，这里有一个非常有趣的行为范围。

使它特别有意思的部分是它实际上可以加载SVG的的。我想它既可作为附加"data:image/svg+xml;base64," 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-06 14:15:33 enhzflep

svg to canvas - opera

回答

相关问题