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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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