InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML5 Canvas

  • canvas introduction
  • canvas line
  • canvas rectangle
  • canvas clear rectangle
  • canvas to png
  • canvas draw image
  • canvas draw image using base 64 string
  • canvas draw image using svg string
  • canvas svg xml text to png image
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML5 Canvas

Convert svg xml text to png image using canvas

By admin on Jan 31, 2016

HTML5 canvas can used to draw image and also be converted to base64 image data url using toDataURL. Here is an example which will convert svg xml text to png (or any other format like jpeg) using this approach. Note that this works in Chrome/Firefox and does not work in IE.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>SVG: <span id="svg1"></span></div>
<div>Canvas:</div><canvas id="canvas1" width="200" height="70"></canvas>
<div>Png:<br/><img id="png1" src="" /></div>

<script type="text/javascript">
window.addEventListener("load", convert);
function convert() {
  var canvas = document.querySelector('#canvas1');
  var ctx = canvas.getContext('2d');
  var svgtext = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"><rect width="100" height="50" style="fill:green;" /><text x="20" y="20" style="font-size:14px;fill:white;">Hello</text></svg>';
  $("#svg1").text(svgtext);
  var svgImage = new Image();
  svgImage.onload = function() {
    ctx.drawImage(svgImage, 20, 10);
    $("#png1").attr("src", $("#canvas1").get(0).toDataURL());
  }
  svgImage.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgtext);  
}
</script>
refresh done
try it online

Suggested posts:

  1. HTML5 canvas – draw image using svg xml string
  2. HTML5 canvas – draw image using base 64 encoded png string
  3. HTML5 canvas draw image examples
  4. How to convert HTML canvas to png image using javascript
  5. HTML5 canvas basic example
  6. How to display text on image using css
  7. HTML5 canvas rectangle example
  8. HTML5 canvas line example
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML5, HTML5 Canvas, Javascript, SVG

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2022 InfoHeap.

Powered by WordPress