inserts svg code on canvas

Question

inserts svg code on canvas

Navigation

#1 by (1 votes)

1

I have this code from an svg image generated by the jquery barcode plugin.

" data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"%20version="1.1"%20width="115"%20height="65"><rect%20width="115"%20height="65"%20x="0"%20y="0"%20fill="#FFFFFF"%20/><rect%20width="1"%20height="50"%20x="10"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="12"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="15"%20y="0"%20fill="#000000"%20/><rect%20width="2"%20height="50"%20x="18"%20y="0"%20fill="#000000"%20/><rect%20width="4"%20height="50"%20x="21"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="26"%20y="0"%20fill="#000000"%20/><rect%20width="3"%20height="50"%20x="29"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="33"%20y="0"%20fill="#000000"%20/><rect%20width="2"%20height="50"%20x="35"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="40"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="45"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="47"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="50"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="54"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="56"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="58"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="60"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="63"%20y="0"%20fill="#000000"%20/><rect%20width="3"%20height="50"%20x="67"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="71"%20y="0"%20fill="#000000"%20/><rect%20width="3"%20height="50"%20x="74"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="79"%20y="0"%20fill="#000000"%20/><rect%20width="2"%20height="50"%20x="81"%20y="0"%20fill="#000000"%20/><rect%20width="2"%20height="50"%20x="85"%20y="0"%20fill="#000000"%20/><rect%20width="2"%20height="50"%20x="88"%20y="0"%20fill="#000000"%20/><rect%20width="2"%20height="50"%20x="91"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="95"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="98"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="102"%20y="0"%20fill="#000000"%20/><rect%20width="1"%20height="50"%20x="104"%20y="0"%20fill="#000000"%20/><g%20transform="translate(57%200)"><text%20y="60"%20text-anchor="middle"%20style="font-family:%20Arial;%20font-size:%2010px;"%20fill="#000000">1234567890128</text></g></svg>"

and try to insert it in canvas as follows:

var img=new Image();
img.src='codigo svg';
ctx.drawImage(img,posX,posY);

but it throws me the following error:

unclosed token

jquery canvas

asked by Quarkbite 02.08.2017 в 15:28

source

1 answer

Tag-it.js not working Convert color image indexed in java

score 1 · Accepted Answer

Following the example of MDN to insert an SVG into canvas you can put your barcode. You just have to clean the SVG and put it in the data variable:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="115" height="65"><rect width="115" height="65" x="0" y="0" fill="#FFFFFF" /><rect width="1" height="50" x="10" y="0" fill="#000000" /><rect width="1" height="50" x="12" y="0" fill="#000000" /><rect width="1" height="50" x="15" y="0" fill="#000000" /><rect width="2" height="50" x="18" y="0" fill="#000000" /><rect width="4" height="50" x="21" y="0" fill="#000000" /><rect width="1" height="50" x="26" y="0" fill="#000000" /><rect width="3" height="50" x="29" y="0" fill="#000000" /><rect width="1" height="50" x="33" y="0" fill="#000000" /><rect width="2" height="50" x="35" y="0" fill="#000000" /><rect width="1" height="50" x="40" y="0" fill="#000000" /><rect width="1" height="50" x="45" y="0" fill="#000000" /><rect width="1" height="50" x="47" y="0" fill="#000000" /><rect width="1" height="50" x="50" y="0" fill="#000000" /><rect width="1" height="50" x="54" y="0" fill="#000000" /><rect width="1" height="50" x="56" y="0" fill="#000000" /><rect width="1" height="50" x="58" y="0" fill="#000000" /><rect width="1" height="50" x="60" y="0" fill="#000000" /><rect width="1" height="50" x="63" y="0" fill="#000000" /><rect width="3" height="50" x="67" y="0" fill="#000000" /><rect width="1" height="50" x="71" y="0" fill="#000000" /><rect width="3" height="50" x="74" y="0" fill="#000000" /><rect width="1" height="50" x="79" y="0" fill="#000000" /><rect width="2" height="50" x="81" y="0" fill="#000000" /><rect width="2" height="50" x="85" y="0" fill="#000000" /><rect width="2" height="50" x="88" y="0" fill="#000000" /><rect width="2" height="50" x="91" y="0" fill="#000000" /><rect width="1" height="50" x="95" y="0" fill="#000000" /><rect width="1" height="50" x="98" y="0" fill="#000000" /><rect width="1" height="50" x="102" y="0" fill="#000000" /><rect width="1" height="50" x="104" y="0" fill="#000000" /><g transform="translate(57 0)"><text y="60" text-anchor="middle" style="font-family: Arial; font-size: 10px;" fill="#000000">1234567890128</text></g></svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

<canvas id="canvas" style="border:1px solid black;padding:1em" width="120" height="80">
</canvas>