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

Curso gratis para crear el archivo PDF a partir de un XML 3.3 ya timbrado. C# .Net #SAT #cfdi




Con este curso de 4 videos te enseño como crear el archivo pdf a partir de un XML ya timbrado con C# .Net.

Te invito a que te suscribas a mi canal de youtube para mas videos interesantes sobre programación.

La ventaja que tiene ese curso, es que haremos el archivo pdf a partir de un archivo HTML, esto es útil para cuando el cliente pide muchos cambios en su formato (es más fácil capacitarlo a que el mismo mueva el archivo html que capacitarlo en crystal reports por ejemplo).

Me enfoco para crear el archivo PDF con un proyecto simple de consola, para que así veas que puedes implementarlo en cualquier tipo de proyecto de C# .Net: mvc .net, asp, Windows form, WPF, WCF etc.

1.- En el primer video nos enfocaremos a obtener la información del xml 3.3 en un objeto, y para ello te muestro como es posible hacer el parseo de los datos del xml para posterior poder manipularlos.

2.- En este segundo video nos centraremos en convertir un archivo html a pdf, y de igual manera te mostrare como ejecutar Razor para que nuestro html sea manipulado dinámicamente (no importa que el proyecto no sea web, yo te muestro como hacerlo).

3.- En este video te muestro como crear el código QR como el SAT lo requiere.

4.- En este video, te muestro como hacer el archivo PDF conforme al anexo 20, al igual veremos cómo crear el texto de la cantidad total de la factura con letra.

5.- Por último, te enseño como puedes navegar a elementos mas profundos, en este caso los impuestos, y de esta manera puedas representarlos en tu pdf.

Con estos 5 videos seras capaz de crear el archivo PDF sin problemas.

 

¿Cómo crear el archivo pdf a partir de un xml timbrado 3.3 C# .Net? | Anexo 20 | SAT #4

En este cuarto y último video de este curso veremos como crear el pdf a partir del anexo 20, a parte veremos como introducir la cantidad total con letra.

Código del video: clic aquí

Primer video: https://www.youtube.com/watch?v=gHSC8GrEC5g

Segundo video: https://www.youtube.com/watch?v=ZppyFAM2JQM

Tercer video: https://www.youtube.com/watch?v=2l9y_dbguaQ

Curso para que aprendas a crear el xml 3.3 desde cero: https://www.youtube.com/watch?v=XlTz0NRQLm4&list=PLWYKfSbdsjJg-yuu9K53GwthkEE8lkXDL

Catálogos sat mysql: https://hdeleon.net/catalogos-para-facturar-3-3-sat-en-mysql/

¿Cómo copiar el contenido al portapapeles de un elemento HTML al dar clic en él?

Para que el contenido que tiene un elemento sea copiado automáticamente al portapapeles del usuario, anexo la siguiente función en javascript ayudándome de los selectores de jquery.

Cada paso esta comentado, para en caso de utilizarla con un distinto elemento puedas modificarla sin dificultad.

En el ejemplo realizo la copia del contenido html que existe dentro de un elemento td de una tabla.

HTML


<table>
      <tr>
           <td onclick="Copiar(this)">Hola soy un texto que se copia al darle clic</td>
           <td onclick="Copiar(this)">Hola yo soy otro texto que se copia al darle clic</td>
      </tr>
</table>


JAVASCRIPT


 function Copiar(element) {
        //creamos un input que nos ayudara a guardar el texto temporalmente
        var $temp = $("<input>");
        //lo agregamos a nuestro body
        $("body").append($temp);
        //agregamos en el atributo value del input el contenido html encontrado
        //en el td que se dio click
        //y seleccionamos el input temporal
        $temp.val($(element).html()).select();
        //ejecutamos la funcion de copiado
        document.execCommand("copy");
        //eliminamos el input temporal
        $temp.remove();
    }

¿Cómo hacer que una caja de texto solo acepte valores numéricos positivos? #jquery #js #html5

Para lograrlo vamos a utilizar el disparador keyup y jquery y haremos un selector por clase, en este caso la llamaremos positive, así podemos reutilizarlo en las cajas de texto que deseemos, código a continuación:

Código HTML


 <input value="" class="positive" min="1" type="number" step="1" name="cajita" id="cajita" />
 <input value="" class="positive" min="1" type="number" step="1" name="cajita2" id="cajita2" />

Código Javascript


$(".positive").keyup(function () {

            var valor = $(this).prop("value");

            //evaluamos si es negativo, y ponemos 1 por defecto
            if (valor < 0)
                $(this).prop("value", "1");
})

Un poco de canvas en este 2018

A lo largo de mi vida profesional he conocido pocos programadores que se involucran realmente en el desarrollo de videojuegos, con la llegada de HTML5 se nos facilitó el desarrollo de juegos gracias a canvas (algo inventado por Apple en el 2004), pero hoy ya más de 10 años después pocos lo conocen realmente, un propósito que tengo el siguiente año es dominarlo a la perfección, no tanto por aspectos laborales sino por un hobby que viene desde mi niñez, crear videojuegos.

Ya he realizado algunas cosas con canvas, pero como todo no por hacer unos cuantos gráficos o animaciones quiere decir que sea un experto (muchos por hacer algo ya ponen en su CV que son expertos), y no es para que todos los desarrolladores se involucren en esta tecnología ni hacer una revolución de ella la cual ya lo fue hace algunos años, sino simplemente dejar este escrito aquí para ser leído por mí un año después.

Por lo pronto abajo dejo un código que hice ahorita en 10 min para que los acompañe cuando tomen hongos o alguna otra droga psicodélica.

Código HTML

 <canvas width="500" height="500" id="myCanvas" > </canvas>

Código JAVASCRIPT


var context = document.querySelector("#myCanvas").getContext('2d');
context.beginPath();
context.arc(250,250,200,0,2*Math.PI,false)
context.fill();
context.stroke();
context.closePath();


    var i=0;
    setInterval(function(){

        DibujaPoligono("#myCanvas",3,i);
       
        if(i==360)
            i=0;  
        i++;

   },10);
    

    function DibujaPoligono(canvas,sides,iTurn){

        var context = document.querySelector(canvas).getContext('2d');
       
        context.beginPath();
        context.fillStyle = "white";
        context.strokeStyle="black";
        
        //pentagono
        var numberOfSides = sides,
            size = 200,
            Xcenter = 250,
            Ycenter = 250,
            step  = 2 * Math.PI / numberOfSides,//para pintar la figura calculamos la posicion
            shift = (Math.PI / 180.0) + iTurn; //giro


        for (var i = 0; i <= numberOfSides;i++) {
            var curStep = i * step + shift;
            
            context.lineTo (Xcenter + size * Math.cos(curStep), Ycenter + size * Math.sin(curStep));
        }


      
        context.fill();
        context.stroke();
        context.closePath();

}