1

I am drawing the text in SVG on an image based on user input in text box.
I want to capture both image and text of SVG to canvas so that
i can convert it to base 64 string after showing it on canvas. I am able to capture the text in canvas but image is not showing.

<body>
  <svg id="svgelem" class="scaling-svg" xmlns="http://www.w3.org/2000/svg">
    <g>
      <image xlink:href="http://i.imgur.com/PWSOy.jpg" x="0" y="0" height="200" width="200" />
      <text x="38%" y="68%" alignment-baseline="middle" text-anchor="middle" font-family="Calibri" font-size="25" id="textbox" fill="black"></text>
    </g>
  </svg>
  <input type="text" name="name" id="name" maxlength="26" />
  <input type="submit" id="drawText" value="Draw It" />

  <div style="clear:both;"></div>
  <br/>
  <canvas id="canvas" style="border:2px solid black;" width="250" height="250">
  </canvas>
</body>

Have a look at jsfiddle

Here's a link
https://jsfiddle.net/atulpr/0yhpygue/14/

Atul Prajapati
  • 177
  • 1
  • 11

1 Answers1

1

This is the same problem as in: Render SVG with external references to Canvas

You need to embed the image with data URI rather than using external URL.

function embedImage(imageElement) {
  var image = new Image();
  image.setAttribute('crossOrigin', 'anonymous');
  image.src = imageElement.getAttribute('xlink:href');
  image.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext('2d').drawImage(image, 0, 0);
    imageElement.setAttribute('xlink:href', canvas.toDataURL('image/png'));
  }
}

https://jsfiddle.net/0yhpygue/15/

Community
  • 1
  • 1
szym
  • 5,606
  • 28
  • 34
  • the code provided in jsfiddle is working in chrome but not in firefox and not in IE. Also in IE the text is not shown when it is written in textbox, look at new fiddle https://jsfiddle.net/atulpr/0yhpygue/19/ – Atul Prajapati May 17 '16 at 20:26