Dado que las imágenes son datos, podemos escribir nuestro código, como

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Ahora mi punto es: ¿podemos crear que base64 de datos con javascript? Es allí cualquier marco para que?

Mi requisito es que tengo una cadena como «la Vaca» y la quiero como una imagen.

Nota: yo no quiero una llamada de servidor para él. Sé que puedo llamar de código del lado del servidor por el paso de «la Vaca» como un parámetro. Mi lado del servidor de código puede generar esa imagen, pero quiero hacerlo desde el navegador con JavaScript.

3 Comentarios

  1. 4

    Puede crear una imagen con una lona. Hay muchos lienzo marcos en los que se puede ayudar. A continuación, puede «exportar» su lienzo a la cadena base64.

    Probar este ejemplo con jCanvas:

    HTML

    <p>
      Result:
    </p>
    <p>
      <textarea id="result" cols="60" rows="10"></textarea>
    </p>
    <p>
      <input id="click" type="button" value="Convert to base64">
    </p>
    <p>
      Canvas<br><canvas id="myCanvas" width="100" height="100"/>
    </p>

    JavaScript

    $(function(){
    
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(0, 0, 80, 80);
    
      $('#click').click(function() {
        $('#result').html($("canvas").getCanvasImage());
      });
    });

    Demo

    Crear codificado en base64 imágenes con JavaScript

    • Sí. Esto parece una opción viable.
  2. 1
     var element = new Image();
     element.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

    Si quiere agregar id de su cuerpo:

     document.body.appendChild(element);

    Tienes que utilizar appendChild en el elemento primario de donde desea que aparezca la imagen. Será automáticamente cargado.

    • Aquí tienes los datos de la imagen. No quiero crear el DOM. Quiero crear los datos de la imagen.
    • Respondiendo a una pregunta que no se realizan en todos.
  3. 1

    Espero que me de su pregunta. Desea que los datos reales y no la uri??

    Me encontré con este pequeño fragmento de MuniR, creo que es lo que quería.

    La cosa es que no se parece alejarse de la lona, cree que con el tamaño de la imagen, la pintura de la imagen y utilice el objeto de lienzo a la guarde!!-No necesariamente el USO… Espero que sea de ayuda, y buena suerte

    function getBase64FromImageUrl(url) {
        var img = new Image();
    
        img.setAttribute('crossOrigin', 'anonymous');
    
        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width =this.width;
            canvas.height =this.height;
    
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0);
    
            var dataURL = canvas.toDataURL("image/png");
    
            alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
        };
    
        img.src = url;
    }
    • La pregunta no era conseguir base64 de datos a partir de una imagen, pero que son en realidad todavía responder a la pregunta y, básicamente, debe ser aceptada respuesta, ya que la solución no requiere un marco más como @AliMamedov la respuesta. La parte crucial aquí es la onload función y esencialmente canvas.toDataURL("image/png") es la magia necesaria.

Dejar respuesta

Please enter your comment!
Please enter your name here