Applying a Base64 Image Texture

This JavaScript program demonstrates how to apply a base64 image texture in a WebGL program.
ApplyBase64Texture.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>

    <script  id="idVertexShader" type="c">
      // The attributes receives data from the buffers
      attribute vec2 afVertexCoordinates;
      varying vec2 afTextureCoordinates;
      void main() {
        afTextureCoordinates = afVertexCoordinates;
        gl_Position = vec4(afVertexCoordinates, 0.0, 1.0);
      }
    </script>

    <script  id="idFragmantShader" type="c">
      precision mediump float;
      varying vec2 afTextureCoordinates;
      uniform sampler2D qUniformSampler;
      void main() {
        gl_FragColor = texture2D(qUniformSampler, afTextureCoordinates);
      }
    </script>

    <script type="text/javascript">
    function Render() {
      // Get the WebGL Context
      var qCanvas = document.querySelector("#idCanvasWebGL");
      var qGL = qCanvas.getContext("webgl");

      // Compile the vertex shader
      var sVertexShaderCode = document.querySelector("#idVertexShader").text;
      var qVertexShader = qGL.createShader(qGL.VERTEX_SHADER);
      qGL.shaderSource(qVertexShader, sVertexShaderCode);
      qGL.compileShader(qVertexShader);

      // Compile the fragment shader
      var sFragmentShaderCode = document.querySelector("#idFragmantShader").text;
      var qFragmentShader = qGL.createShader(qGL.FRAGMENT_SHADER);
      qGL.shaderSource(qFragmentShader, sFragmentShaderCode);
      qGL.compileShader(qFragmentShader);

      // Compile and link the program
      var qProgram = qGL.createProgram();
      qGL.attachShader(qProgram, qVertexShader);
      qGL.attachShader(qProgram, qFragmentShader);
      qGL.linkProgram(qProgram);
      qGL.useProgram(qProgram);

      var afVertices = [-1, -1, 1, -1, -1, 1, 1, 1];
      var qVertexBuffer = qGL.createBuffer();
      qGL.bindBuffer(qGL.ARRAY_BUFFER, qVertexBuffer);
      qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array(afVertices), qGL.STATIC_DRAW);
      var iCoordinatesPerPoint = 2;
      var qVertexAttribute = qGL.getAttribLocation(qProgram, 'afVertexCoordinates');
      qGL.enableVertexAttribArray(qVertexAttribute);
      qGL.vertexAttribPointer(qVertexAttribute, iCoordinatesPerPoint, qGL.FLOAT, false, 0, 0);

      var qTexture = qGL.createTexture();
      var qImage = document.getElementById("idTexture");
      qUniformSampler = qGL.getUniformLocation(qProgram, 'qUniformSampler');
      qGL.activeTexture(qGL.TEXTURE0);
      qGL.bindTexture(qGL.TEXTURE_2D, qTexture);
      qGL.pixelStorei(qGL.UNPACK_FLIP_Y_WEBGL, true);
      qGL.texImage2D(qGL.TEXTURE_2D, 0, qGL.RGBA, qGL.RGBA, qGL.UNSIGNED_BYTE, qImage);
      qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_MAG_FILTER, qGL.LINEAR);
      qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_MIN_FILTER, qGL.LINEAR);
      qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_WRAP_S, qGL.MIRRORED_REPEAT);
      qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_WRAP_T, qGL.MIRRORED_REPEAT);
      qGL.uniform1i(qUniformSampler, 0);

      var iNumberOfItems = 4;
      qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, iNumberOfItems);
    }
    </script>
  </head>
  <body onload="Render()">
    <canvas id="idCanvasWebGL" width="512" height="512" style="background-color:white;border:1px solid red;"></canvas>
    <img hidden id="idTexture" src="data:image/png;base64,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" />
  </body>
</html>
WebGL JavaScript

Applying a Base64 Image Texture

ApplyBase64Texture.html

Output
