2

Buenos días.

Tengo una imagen en una carpeta del servidor que quiero codificar en base64 para poder insertarla en un pdf con el plugin jsPdf.

He probado a insertar la imagen en un canvas pero cuando codifico se codifica correctamente pero claro, me codifica el canvas, no la imagen que hay dentro de él. Estes es el código:

var elCanvas = document.getElementById("esMiCanvas");
var ctx = elCanvas.getContext("2d");

var imagen = new Image();
imagen.src = "../img/BADs/final.jpg";

imagen.onload = function(){
    ctx.drawImage(imagen, 0, 0);
}
var dataURL = elCanvas.toDataURL("image/png");

El dataURL es correctamente la codificacion en base64 pero es la del canvas vacio, sin la imagen.

¿Algún script para codificar la imagen en base64? En javascript o si es más facil en php, en php.

Saludos.

Código HTML:

<canvas height="300px" width="291px" id="esMiCanvas" style="background-color: yellow"></canvas>

RESPUESTA A Asier Villanueva:

No me funciona. Si que me codifica algo lo que no sé el que ya que la url en base64 que me da parece que está incompleta. Es esta:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASMAAAEsCAYAAACIdtX4AAAajUlEQVR4Xu2dBYxkVROF7+Lu7hJ0wwZ3tyDBg7sGd4fg7hDcF4fgEtzdggR3wuLuzv45d/8a7j56dqZ3enbqdX0v2ezMdPfrqu/0O31vXXn9Bg8ePDhxQAACEOhjAv0woz5WgLeHAAQyAcyIDwIEIOCCAGbkQgaCgAAEMCM+AxCAgAsCmJELGQgCAhDAjPgMQAACLghgRi5kIAgIQAAz4jMAAQi4IIAZuZCBICAAAcyIzwAEIOCCAGbkQgaCgAAEMCM+AxCAgAsCmJELGQgCAhDAjPgMQAACLghgRi5kIAgIQAAz6uFn4J9//kkjjTRS+u2339IYY4yRtD2U/vbrr7+mccYZJ//cr1+//O+PP/5Io402Wn7Hv/76K40yyig9fHdeDoH2IYAZtUBLM5Zvv/02TTjhhB1n/Pvvv7MJyaBGHnnkod5Jf9NjHBCAwBACmFEPPwkylZ9//jm3gmQ+ZjoyKP0swyn/rufrn1pTHBCAwL8EMKMWfRr+/PPPfCYZkIzmiy++SJNNNtl/zq5um/6pi2ZdvBaFwGkgUGsCmFEP5fvxxx/TuOOOO1QN6LXXXkv7779/GjRoUHr88cfTmGOOmVtD1mVTS0lmRN2oh/B5eVsRwIxaIKfMRS2j0UcfPZvOsccem26++eb8tyuvvDL1798/t4J0qNVkJoQZtQA+p2gbAphRC6S0kTSdSiZ05JFH5u6aRs/23nvvtPHGG+dWkZmPjarRTWsBfE7RNgQwox5K+dNPP+XitVpEb7zxRtpxxx2Tum6LLbZYevTRR9Maa6yRu2xqNZkZlebVw7fn5RBoGwK1N6NydGrAgAFprLHGSk899VRulahL1Iq5PFYXkuo2XF92t9TC+eSTT9J6662XH19hhRXSXHPNlY455pg0//zzp4suuijPO9I8JBvOp4vWNtcQi...4EvBLAjLwqQ1wQCEYAMwomOOlCwCsBzMirMsQFgWAEMKNggpMuBLwSwIy8KkNcEAhGADMKJjjpQsArAczIqzLEBYFgBDCjYIKTLgS8EsCMvCpDXBAIRgAzCiY46ULAKwHMyKsyxAWBYAQwo2CCky4EvBLAjLwqQ1wQCEYAMwomOOlCwCsBzMirMsQFgWAEMKNggpMuBLwSwIy8KkNcEAhGADMKJjjpQsArAczIqzLEBYFgBDCjYIKTLgS8EsCMvCpDXBAIRgAzCiY46ULAKwHMyKsyxAWBYAQwo2CCky4EvBLAjLwqQ1wQCEYAMwomOOlCwCsBzMirMsQFgWAEMKNggpMuBLwSwIy8KkNcEAhGADMKJjjpQsArAczIqzLEBYFgBDCjYIKTLgS8EsCMvCpDXBAIRgAzCiY46ULAKwHMyKsyxAWBYAQwo2CCky4EvBLAjLwqQ1wQCEYAMwomOOlCwCsBzMirMsQFgWAEMKNggpMuBLwSwIy8KkNcEAhGADMKJjjpQsArAczIqzLEBYFgBDCjYIKTLgS8EsCMvCpDXBAIRgAzCiY46ULAKwHMyKsyxAWBYAQwo2CCky4EvBLAjLwqQ1wQCEYAMwomOOlCwCsBzMirMsQFgWAEMKNggpMuBLwSwIy8KkNcEAhGADMKJjjpQsArAczIqzLEBYFgBDCjYIKTLgS8EsCMvCpDXBAIRgAzCiY46ULAKwHMyKsyxAWBYAQwo2CCky4EvBLAjLwqQ1wQCEYAMwomOOlCwCsBzMirMsQFgWAEMKNggpMuBLwSwIy8KkNcEAhGADMKJjjpQsArAczIqzLEBYFgBDCjYIKTLgS8EsCMvCpDXBAIRgAzCiY46ULAKwHMyKsyxAWBYAQwo2CCky4EvBLAjLwqQ1wQCEYAMwomOOlCwCsBzMirMsQFgWAEMKNggpMuBLwSwIy8KkNcEAhGADMKJjjpQsArgf8BPu8xvb2vyZ4AAAAASUVORK5CYII=

Si se observa se ve que hay una sección donde hay 3 puntos (lo he puesto en negrita). Parece que ahí falta codificacion.

1
  • 1
    Si eso lo ves en la consola de depuración debes hacer click sobre los datos para que se expandan de manera completa. Para ver el contenido completo debes sacarlo al navegador con, por ejemplo, una llamada a document.write(). No uses console.log() para visualizar grandes cantidades de datos sin que los modifique la herramienta de depuración de tu navegador. Commented el 7 feb. 2018 a las 9:22

2 respuestas 2

2

El problema que tienes es que la consola de depuración puede recortar cadenas excesivamente largas o modificarlas para mejorar su visualización.

Es mejor dar salida de los datos a un contenedor que te permita ver el contenido completo sin modificar.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.2/jSignature.min.js" integrity="sha256-D7kWEIHWLFrjqBvSjtsbAWsGSn89lacfFhOShSU/Xuk=" crossorigin="anonymous"></script>
<label>
  <a href="#firma1">Firma:</a>
  <a href="#png">(Ir a PNG)</a>
  <a href="#jpeg">(Ir a JPEG)</a>
</label><br/>
<div id="firma1" style="border: 1px solid blue"></div>
<p><button id="exportar">Pulse para exportar</button></p>
<p id="png">Datos PNG:
  <textarea id="salida_png" style="width: 100%; height: 200px;"></textarea>
</p>
<p id="jpeg">Datos JPEG:
  <textarea id="salida_jpeg" style="width: 100%; height: 200px;"></textarea>
</p>
<br/><br/><br/><br/><br/><br/>
<script>
/* Iniciamos la zona de firma */
$(function(){
    $("#firma1").jSignature();
});

/* Capturamos el evento onClick del botón */
$( "#exportar" ).click(function() {
  /* Accedemos al canvas creado para dibujar la firma */
  var canvas = $( "#firma1" ).find("canvas")[0];
  /* Generamos una imagen PNG y otra JPEG */
  console.log(canvas.toDataURL('image/png'));
  $( "#salida_png" ).text(canvas.toDataURL('image/png'));
  $( "#salida_jpeg" ).text(canvas.toDataURL('image/jpeg', 0.8));
});
</script>

Podrás ver que ambos campos de base64 son diferentes en la consola de depuración y en los campos de texto debido a las modificaciones que puede hacer la consola de depuración de tu navegador.

2
  • Pues bueno. Ha funcionado todo a la perfección. Gracias !!
    – Marcos
    Commented el 7 feb. 2018 a las 10:14
  • 1
    De nada, un placer :) Commented el 7 feb. 2018 a las 10:15
0

El problema es que el método toDataURL lo ejecutas antes de que se haya dibujado la imagen. Prueba a hacerlo después de ejecutar el drawImage:

var elCanvas = document.getElementById("esMiCanvas");
var ctx = elCanvas.getContext("2d");

var imagen = new Image();
imagen.src = "../img/BADs/final.jpg";

var dataURL;
imagen.onload = function(){
    ctx.drawImage(imagen, 0, 0);
    dataURL = elCanvas.toDataURL("image/png");
    console.log(dataURL);
}

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.