Codificar imagen en base64

publicado por: Anonymous

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.

solución

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.

_x000D_

_x000D_

<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>_x000D_
<label>_x000D_
  <a href="#firma1">Firma:</a>_x000D_
  <a href="#png">(Ir a PNG)</a>_x000D_
  <a href="#jpeg">(Ir a JPEG)</a>_x000D_
</label><br/>_x000D_
<div id="firma1" style="border: 1px solid blue"></div>_x000D_
<p><button id="exportar">Pulse para exportar</button></p>_x000D_
<p id="png">Datos PNG:_x000D_
  <textarea id="salida_png" style="width: 100%; height: 200px;"></textarea>_x000D_
</p>_x000D_
<p id="jpeg">Datos JPEG:_x000D_
  <textarea id="salida_jpeg" style="width: 100%; height: 200px;"></textarea>_x000D_
</p>_x000D_
<br/><br/><br/><br/><br/><br/>_x000D_
<script>_x000D_
/* Iniciamos la zona de firma */_x000D_
$(function(){_x000D_
    $("#firma1").jSignature();_x000D_
});_x000D_
_x000D_
/* Capturamos el evento onClick del botón */_x000D_
$( "#exportar" ).click(function() {_x000D_
  /* Accedemos al canvas creado para dibujar la firma */_x000D_
  var canvas = $( "#firma1" ).find("canvas")[0];_x000D_
  /* Generamos una imagen PNG y otra JPEG */_x000D_
  console.log(canvas.toDataURL('image/png'));_x000D_
  $( "#salida_png" ).text(canvas.toDataURL('image/png'));_x000D_
  $( "#salida_jpeg" ).text(canvas.toDataURL('image/jpeg', 0.8));_x000D_
});_x000D_
</script>

_x000D_

_x000D_

_x000D_

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.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *