1

Tengo este codigo de una imagen svg generada por el plugin barcode de jquery.

"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>"

y la intento insertar en canvas del siguiente modo:

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

pero me lanza el siguiente error:

unclosed token

4
  • ¿Ese es todo el codigo que tienes? Faltan variables y cosas
    – user7176
    el 3 ago. 2017 a las 7:44
  • no se a que variables y cosas te refieres. ctx corresponde al context de definicion de canvas, posX y posY son totalmente irrelevantes para la consulta. Tambien comentar que si en vez de csv le meto un bmp, este codigo si que funciona.
    – Quarkbite
    el 3 ago. 2017 a las 8:17
  • Me refería a eso, no puedo saber si has definido la variable ctx si no lo pones en el código. El svg está mal formado, tiene %20 en lugar de espacios.
    – user7176
    el 3 ago. 2017 a las 8:26
  • Pero %20 corresponde a un espacio en acii en hexadecimal
    – Quarkbite
    el 3 ago. 2017 a las 8:33

1 respuesta 1

1

Siguiendo el ejemplo de MDN para insertar un SVG en un canvas puedes poner tu código de barras. Sólo tienes que limpiar el SVG y ponerlo en la variable data:

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>

1
  • claro, tambien hay que eliminar la cabecera, gracias por la info.
    – Quarkbite
    el 3 ago. 2017 a las 9:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.