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.
document.write()
. No usesconsole.log()
para visualizar grandes cantidades de datos sin que los modifique la herramienta de depuración de tu navegador.