CODEWITHSUNDEEP
javascriptjqueryhtmlsvg
Karthi Keyan
Karthi Keyan

Reputation: 4393

Converting svg with image element to html canvas

I'm just trying to convert svg to html canvas, it works fine until i use image element in svg, if i use image elements means canvg is not working.

This is the code which i used to convert svg to canvas

var svgCanvas, context, svgCanvasElement, link;
svgCanvas = $('<canvas id="svgCanvas" width="250px" height="25px" style="display:none;"></canvas>');
context = svgCanvas[0].getContext('2d');
svgCanvasElement = $(svgCanvas)[0];
var serializer = new XMLSerializer();
var svgElement = document.getElementsByTagName("svg");
var svg = serializer.serializeToString(svgElement[0]);
var canvgMethod = new canvg(svgCanvasElement, svg);

Here not working JSFiddle DEMO.

NOTE : This code working fine for other elements like circle,rect,polygon and etc. Here is working JSFiddle Demo with circle element.

How to overcome this issue and how can i convert this image element into canvas?
Any Suggestions will be appreciated.

Upvotes: 0

Views: 2307

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:- http://jsfiddle.net/adiioo7/xvQHb/3/

It's done using canvg plugin Reference

//load a svg snippet in the canvas with id = 'drawingArea'
  canvg(document.getElementById('canvas'), '<svg>...</svg>')

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123985

You'd need to convert the image into a data URL. What you pass to canvg must be complete in a single file it can't have external references.

I can show you steps to see an image work. Start from this...

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="paste your data URL in here" height="75" width="75" y="27.5" x="29.5"></image>
</svg>
  1. goto http://dopiaza.org/tools/datauri/index.php
  2. Select retrieve from a URL
  3. Enter http://archiveteam.org/images/thumb/4/40/Google_Logo.png/800px-Google_Logo.png as the URL
  4. Replace the output in the place indicated above (it's too big to include here)
  5. Paste the whole lot above into the test box here
  6. You're done, see the result on the left. Note I've only tested this on Firefox.

Upvotes: 1

Related Questions