Encode image in base64

Question

Encode image in base64

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

Good morning.

I have an image in a server folder that I want to encode in base64 to be able to insert it in a pdf with the jsPdf plugin.

I have tried to insert the image in a canvas but when I code it is encoded correctly but clearly, it encodes the canvas, not the image that is inside it. This is the code:

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

The dataURL is correctly encoded in base64 but is the empty canvas, without the image.

Any script to encode the base64 image? In javascript or if it's easier in php, in php.

Greetings.

HTML Code:

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

ANSWER TO Asier Villanueva:

It does not work for me. If I encode something, I do not know what the base64 url that it gives me seems to be incomplete. It's this:

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

If you look at it, you see that there is a section where there are 3 points (I have put it in bold). It seems that there is a lack of codification.

javascript php imagen base64

asked by M. Giner 07.02.2018 в 07:06

source

2 answers

0

The problem is that the toDataURL method is executed before the image has been drawn. Try doing it after running the 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);
}

answered by 07.02.2018 в 09:27

Error sending mail with PHPMailer Use material library with angular

score 2 · Accepted Answer

The problem you have is that the debug console can trim excessively long strings or modify them to improve visualization.

It is better to output the data to a container that allows you to see the entire content unmodified.

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

You can see that both base64 fields are different in the debugging console and in the text fields due to the modifications that can be made by the debug console of your browser.