¿Cómo mostrar un imagen guardada como matriz de byte en mysql en un elemento img? Laravel

Para mostrar una imagen que tenemos guardada en una base de datos como matriz de byte en un elemento html img por medio de blade en Laravel, tenemos que hacer lo siguiente:


 <img src="data:image/png;base64,{{ chunk_split(base64_encode($bImagen)) }}" style="width:80%">

Suponiendo que nuestra matriz de byte se encuentra en la variable $bImagen enviada con anterioridad desde un controller.

Codificar y decodificar base64 en #javascript

Para realizar la codificación y decodificación de base64 en javascript, vamos a utilizar el siguiente código comprimido que ya contiene todo lo necesario, pueden copiarlo en un archivo con extensión “js” o ponerlo en la página web donde va a utilizarlo.

Código Necesario, debe copiarse toda la siguiente línea:


//COPIAR ESTE CÓDIGO
//comienzo de código
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f&amp;lt;e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n&amp;gt;&amp;gt;2;o=(n&amp;amp;3)&amp;lt;&amp;lt;4|r&amp;gt;&amp;gt;4;u=(r&amp;amp;15)&amp;lt;&amp;lt;2|i&amp;gt;&amp;gt;6;a=i&amp;amp;63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f&amp;lt;e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s&amp;lt;&amp;lt;2|o&amp;gt;&amp;gt;4;r=(o&amp;amp;15)&amp;lt;&amp;lt;4|u&amp;gt;&amp;gt;2;i=(u&amp;amp;3)&amp;lt;&amp;lt;6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n&amp;lt;e.length;n++){var r=e.charCodeAt(n);if(r&amp;lt;128){t+=String.fromCharCode(r)}else if(r&amp;gt;127&amp;amp;&amp;amp;r&amp;lt;2048){t+=String.fromCharCode(r&amp;gt;&amp;gt;6|192);t+=String.fromCharCode(r&amp;amp;63|128)}else{t+=String.fromCharCode(r&amp;gt;&amp;gt;12|224);t+=String.fromCharCode(r&amp;gt;&amp;gt;6&amp;amp;63|128);t+=String.fromCharCode(r&amp;amp;63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n&amp;lt;e.length){r=e.charCodeAt(n);if(r&amp;lt;128){t+=String.fromCharCode(r);n++}else if(r&amp;gt;191&amp;amp;&amp;amp;r&amp;lt;224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&amp;amp;31)&amp;lt;&amp;lt;6|c2&amp;amp;63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&amp;amp;15)&amp;lt;&amp;lt;12|(c2&amp;amp;63)&amp;lt;&amp;lt;6|c3&amp;amp;63);n+=3}}return t}}

//fin de código

Ahora muestro un ejemplo para realizar la codificación y decodificación:

Codificar en base64:


//codificar en base64
//variable con contenido "patito"
var variable="patito"

//codificamos a base64 utilizando Base64.encode
var variableBase64=Base64.encode(variable)

//imprimimos el valor
document.writeln(variableBase64);
//imprime cGF0aXRv

Decodificar en base64:


//decodificar en base64
var variableBase64="cGF0aXRv"

//decodificamos a base64 utilizando Base64.decode
var variable=Base64.decode(variableBase64)

//imprimimos el valor
document.writeln(variable);