Home >Web Front-end >HTML Tutorial >How to use svg object in Html5 canvas. _html/css_WEB-ITnose
How to use svg object in Html5 canvas. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:15:321319browse
Use drawImage in canvas and pass in the svg object as a parameter, but it cannot be displayed. I don’t know if drawImage does not support this type of object parameter. Solve. . .
Reply to discussion (solution)
See method
http://code.google.com/p/canvg/
http://canvg.googlecode .com/svn/trunk/examples/index.htm
I’ll post a piece of code for you:
828aa372422c07836de21594ce86fe2f
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7test6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
svg, canvas { margin:1em }
99f7a397475a4a64d9f5e82da03b8c95
6c04bd5ca3fcae76e30b72ad730ca86d
e388a4556c0f65e1904146cc1a846bee
" height="100px" id="i">
FAIL
f7ea17b43e74122afa4d554f8f53edc8
< ;/svg>
3134d685c07040fc92fafff909501891FAILc2caaf3fc160dd2513ce82f021917f8b
94b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var c = document.getElementById("c").getContext("2d"),
i = document.getElementById("i")
c.drawImage(i, 0, 0)
9429d6e1efad07153846e528605c447e
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
Why can’t the canvas draw the svg image? If it can be drawn, what should I do (no third-party stuff is used) ?
Actually, I would like to know what are the acceptable image types for the first parameter of the drawImage method? ?
Test in browsers that support svg, such as Firefox16, Chrome
<html> <head> <title>test</title> <style> svg, canvas { margin:1em } </style> </head> <body> <p> <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" id="i"> FAIL <circle cx="50px" cy="50px" r="50px" fill="lime"/> </svg> <canvas width="100" height="100" id="c">FAIL</canvas> </p> <script type="text/javascript"> window.onload = function () { var ctx = document.getElementById("c").getContext('2d'); var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById("i")); var img = new Image(); img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml); img.onload = function () { ctx.drawImage(img, 0, 0); }; } </script> </body></html> In fact, I would like to know the acceptable image types for the first parameter of the drawImage method. What are they? ?
You can use HTMLImageElement, HTMLCanvasElement or HTMLVideoElement as parameters