微信小程序webgl 显示图片

cpp 复制代码

// wxml
<view class="container">
    <!-- 加载地图容器 -->
    <canvas type="webgl" id="testMap" style="width: 100%; height: 100%;" disable-scroll bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
</view>

cpp 复制代码

Page({
  data: {},
  // 定义全局map变量
  fmap: null,

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.createSelectorQuery().select('#testMap')
      .fields({ node: true, size: true })
      .exec((res) => {
        let textCanvas = res[0].node;  // 重点1

        let gl = textCanvas.getContext('webgl');  // 重点2


        const vsSource = `
 attribute vec4 aVertexPosition;
 attribute vec2 aTextureCoord;
 varying highp vec2 vTextureCoord;
 void main(void) {
     gl_Position = aVertexPosition;
     vTextureCoord = aTextureCoord;
 }
`;

        // Fragment shader source code
        const fsSource = `
	 varying highp vec2 vTextureCoord;
	 uniform sampler2D uSampler;
	 void main(void) {

     gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x,1.0-vTextureCoord.y));
   
 }
`;

        // Initialize shaders
        function initShaderProgram(gl, vsSource, fsSource) {
          const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
          const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

          const shaderProgram = gl.createProgram();
          gl.attachShader(shaderProgram, vertexShader);
          gl.attachShader(shaderProgram, fragmentShader);
          gl.linkProgram(shaderProgram);

          if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
            return null;
          }
          return shaderProgram;
        }

        function loadShader(gl, type, source) {
          const shader = gl.createShader(type);
          gl.shaderSource(shader, source);
          gl.compileShader(shader);

          if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
            return null;
          }
          return shader;
        }

        const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
        const programInfo = {
          program: shaderProgram,
          attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
            textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
          },
          uniformLocations: {
            uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
          },
        };

        // Initialize buffers
        const positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        const positions = [
            -1.0, 1.0,
            1.0, 1.0,
            -1.0, -1.0,
            1.0, -1.0,
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

        const textureCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
        const textureCoordinates = [
            0.0, 0.0,
            1.0, 0.0,
            0.0, 1.0,
            1.0, 1.0,
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates), gl.STATIC_DRAW);

        // Load texture
        function loadTexture(gl, cb) {
          const texture = gl.createTexture();
          gl.bindTexture(gl.TEXTURE_2D, texture);

          const level = 0;
          const internalFormat = gl.RGBA;
          const srcFormat = gl.RGBA;
          const srcType = gl.UNSIGNED_BYTE;

          const image = textCanvas.createImage();
          image.onload = function () {
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
            gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image);

            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

            cb();
          };
          image.src = 'data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCABRAE8DASIAAhEBAxEB/8QAHAABAAIDAQEBAAAAAAAAAAAAAAcKCAkLBgQF/8QALhAAAQQCAgEEAQMDBQEAAAAABQMEBgcBAgAIEQkSFBUTFiExF0FxCiRRUlSi/8QAGwEAAgIDAQAAAAAAAAAAAAAAAAUEBgMHCAn/xAAnEQACAgEEAgICAwEBAAAAAAACAwEEBQAGERITIQcUFiIIIzIzUf/aAAwDAQACEQMRAD8Ap38ccc2xrU+nHHMiev8A1Rv3s+YXEUvXZiV6MVNEyxzwmOjQbKmMba4Jnn+6A9Fb2baqYZpKrv8AZPOFdGuyfnbEa5dp46s25ftV6VRI9nWbTl10LHniJNrSEB5mYiOSjmZiI5mYjUPIZGhiqjr+Tu1MdRrj2fbu2FVayhmYiJY5xgseZmBGJKJIpgRiZmI1jtxzdDv6FHc/UVh7ghUuxHKX5ciP1k4wpjbx5/F8vIj4+VP7f9fd+3u8fvzW7fvV68+schSjlzwErE13mVMiSm2E30fNppZx71BBxluswd51xnGyjfKqbxHXbXZdsljbXyixG89qZ6xNTD7hxWQtRBT9avbUTyEfZEtUyJtEY9kSxIYj3M8e9VvB/IGydy25oYLdOEyl2IIoqVbyTsmIRyZKTJCxwDESREoTGBjtM8e9QBxxxyzauGnHHHDRpxxxw0a9ZAYi/sCdQuBi9tNCc2lkciI7dTzhPR/JDDMMz238Yzn2auHqedvGM59uM/tnl4KHx5DrJ1+HV318igd8/iIpg1GMHumUNT5PZVvoYPGdmrhiuQJvs7OiC+uXzfZRXOiCa6SCaemKQFfS53X89hE8Hp6qv4TL41LmSW2c66qO42aZGWye22MbZ113WZaa5zjGc4xnz4z/ABy5bWl3Ra1YYEnMOLJEQZ1mi7Q3030ys1V3T1yuwep6bbZbvmamdkHSG/jbRXTPjzrnXbPPPzvWyNkdvDAGzDrZZY5X7/XZfgk+KLPSYiZ+v5IRBTHorPWf9a8+v5z57cmCH4+ctTWbSN+SO2MQ36Lc4llMq6MiSiDiWUJfFESMCIJyPiLkTkconFnT3Fb5NJghu1i4jWrz9NZdK4F/qHLbG+7LC358rZb4WztnCXy8KbeMN/mY2z8nEeSSnDfdXr4Qra36ycPTUiFu8PE4sGfGFYZIU1HOgSRhVtckVRhFl/t3mEFX62ium7gc7VcM3LhHeXesVff16t4LCXLxZqCbtnB+TuG+2NXOAQxRDVw2ab5xnCbl+5ctGCa2cZ+Nq53dY0UyhhPffVHyo2v5gAqKH1e/FQ/WMLk05cKTaIx0e5bLaoai3nnGXbki7x5XXeLrqOFltsKK4X3UVW01XtDY1i+Q5NdiMTFO6D6lyuJldGwmBMQr8tEVpUUiUmcEUlAhEFEFI0L+L3wdur5qo2N7hnw2Tt/DZ8Qxebo1m3M7by1JSrDa2LUy4mtWoUJsVybds+ZjLMDWUpsBZJPJsvHrndPXaWGInblaTqDLjTpcIyIymIyCPCz+RL5wy3fAX5cezbFmLn4+XDZyxVXSUQ30U12zjPIQ5107ciNb9in8u673ZRTawKvLRBB4QOypgwfRgks+UVQ3GjVfbqSGGB37LtCw941JMXmn52e7VVBB3vzUfVg6Maenx3MnFGBiLsxXZYULsuoyZHfVQstXEtdlWwxgYV010TcFI4aCH4q7fp6JaFtwf22rZnh98Nv19icvF/8AoaPSyC4KZj/DYHgTMY9dJ7TzIe+In9ZmInj1YvYV+MQkysfbGBBTXeKElLYCOTJYkYiLSgiiBLgZnr/5M62uOOOPNKdOOOOGjUqUVWeLpu6nKc2OfpnW2bUr2s8yT637n9PYnkuERbJz6f7AT9r9Tgr8/wCt+0G/O+P8X7Bn+X5Cdw2h/SAZddJ+f6Q1/wCoRAMdnJhI1y7QbL+rV4JNEGI2GLyZdIJ8ks1gjpPaPByBdA/+tXgx97FWDZs6f6oo8qKdW5rHK27N9dLFmBH6eJQG96imspL/ABH5D6uORawI8dNkfgC2r0m9+CMYOnPxBzJ2/c/i/CzauHG6aW9zGkfVS9GKtuz1x9sJ5e1q2JbspvucWXVkoRqa32u0Lr2YxMxHU6+IBHo1Jg53EtpdIw2rrZwSarhg8KWHIAVRbpgstyWPxOSqZFGaHIPQvHG/G0aNZbht5oHB9GLxOQ4Jx6C/tuIggY1X/PtIyMpNy7K23v3E09vbqweHz+FbncddyVPNXblapFbGnFsDlFK9Tm4zzgPir2hsY9hxAXUMVPXWsbqJ6uUj6feoKXrnsAnDCNQxSxrIoWwbOjcYkIc0kKCyd/HB8/zHdpZI27NlqcAii5wS0UKOWIRckmOVJO2zdN1ethNhQqyYuHmtfykFM4kfZokAsjjZRsYDkmbhPVVFdq+ZLrIKa7ab65zrjf36Zz7d9ddsZxjkl9kJeBsDsPfU9iz/ACVjE3ui0ZfHCmWr1jkkBks4OmRD/LIi3aEGeXg963cfFftGr1v+T8Tpugvoolr6mlu4PaProio0o6+7SrBitvndYbEZgYFDFds5zttncci5wyz7tts7b4/BjG+2c7bec54jjalFVVIY1S8fPWDYgQKEkw4GTLrzys+eYmBjr6iIAeJmWewsHtX4zxTttbRwNPDbfnIW8grH40mChVq1IQ9qhcxsQDoUuZACAImOwxHMxPWWlUyjMHjZ2YzA2OjcWjIt4akB8w60YixAkehu4ev37tffVJu2bIabqKqb7YxjXH98+MZ5mnrO924t3w7yzC0683Wc1bB4sAp2sSrlBVq5kMViD86XdyTdqvjVds1PS6USgmIRcaJO9AbkZ85u2e5cN0oeV9ULvmSTmrOV9lbIn4aw4TIa9l0csAwpL44VjElGuRj9rkKaw6YNXKCbrdyOftEUHo57om5arJqa/vgLxjisPNBpuawWMkOgSHMCIlMSczBRE9uRiInnjrM+uZ1ZcrmPvqBKgJa4LuyD4kiIfQcTEzEDETMzHHPbj3xGnHHHHukWnHHHDRpzIqmuqtz3xErBnMBCCNYvXws0tsWlUgYRRnNZZHouUsEvWFdOSvsbSuyR9XRqaWmQjzdZugLgsKNESxJiQIRMXJMdeWDfS1KZBdaQo+mb9nMLva4/UR6w9d7GKoO7pjMRpahbbjV1zEvG4pIabvXrjbCUltiU9c4ZLbmVqa3av0kULhdRxIjYrvZtLI+Fg5Rza2Lu2UmCmhOOqpewYYFexmMzjcDUsMURpWxKLmVrts93qhVYHWBG0aQo2puNUp99C3gTEArI3XqEiAm18Rib+ZsqEwBrIY2vj2rStSiZYcS6osqef71XA076UHeMeesuPxWny1vO64iyEpQ0pATM7bJ2Bp+p6sjBMPBofCoeVsDBQDvaw82WdTaIwqOagItMHjE++cswrI9B9V9Juzt1R+6CVa0/YUrllFT6HVbMKfBVzZshul7Ycs2nyj2Iga3jMIOG9zMBG1lMjNlNTuoDaFjxiOhPOCJEewc2g4PZ1sTotArYNRu1bv6sluqcf9T2nrDlwTuTKLRJWh0avM2dGU3sL7LeoB6kZIONNDvkKtnFdWCJgZKS2TVu8lZIHHQd3vqc61OKdubpn6YdbVbWQtk+DeoTdw66z9wf0wcDbSuAx1bhc5ncqMNZt1y7i1+0rmHiSAmHQERIut9wEFY9CWZhzFm0sPZVDVX8ktqRkvsipVjGX8BjbAsGVyqMpvjGbRsZW0DBWNepWsfkNBtcmyxtqjir9dw4/IlKrR+OVi8ErM2quIyN+k9JgwLK6G0L24341ZrY0WWhiNv2K7VgUSrLZatZCLmFKuWJU/8ASU9SKvxFeHl+lfaCWCrEr9KfJqwnrnfRl7B/aYNgysMs8K7rIWcgU3BPATly8FGhyY8mDeh5PGC8gjJgeYca59dsb6421z51zjzjPjOPOP8AGfGeWLJpKemV8U52EitBnOmsxsEZ1uvqyGgyFVn1vg0u+irSsJLMpIYjkhX/ANKJ1VfJGQgcS6KMGkf7G0tKiC7bRnGbIiBlZoeYVxRSmFRzRTGc5xuljbGc+POcZ22/nxrrj/5x/jjnF5K3avXattQqiK6cnTGVmpk0chkcuiuMd5/uRXigVILUDHnfVsyZS0WCCfKY2rVpVLVR0u7WX421wYMELlHH4my7sQRwp7xyK7bK0zylVlEgIqNUl+hxxxx/pFpxxxw0aclquuxHYGmI1MIdT1lKwOOT4kkYlTZnGoeSJOiyNZWrTqRQVIjkcKyOLlEK5u60I62IxYsGeNcyjYu3WSPBwBQVEvHMVhCrVaxTsBDattcJtVz9psphgN8L1z+jleVS2eNkEEmsC69gGYzV7Dqj1Wq7CTYRJElwT1YojWaiJZx+wESmMXJDMTIGYTPUiiZXCdj+0kYh0VgcZ7EWeBj0JktYyyJ7DJE6ayOOlKV0O/0fHB5unjE2Yw2q3Mokxaua9QkOkChMhkkhksbjQ2QHChN3JlV93uwVQk4UUBA6ZOv4L2ssjuGOcH68bJCidqWnXgytZOLLQmMk4xXqddJhRSL4VBgkPDimRBdyz3y4jPx483xc45DfiaFjzS2uMlYemy9kSUNa+vZw9xLibE+TyDZ29gmyyCgznEY4TIgqIEJSspeT1gHz1BJVxCYGVwg6uRpSrx8dJXFXMZVABIzCwyV3xwJWGyWZYb1CuyIEBPgLOvuk7dtZdQ2rSsjdxDoN0ypeUM4rb0JMQKSPY5YHX2jqhsQCZaBzbpyO1Yy/UA7eJotpQBkgNR4Gd4TDGnwWDVn/AOdLCf8APn+M5z/PnPn+f+efdxzMqjVRYK0pIA8qiKJMEYEpq1n27KEz1iOYW+/bZEzyXLyiZkYGBxOvWnoiq1xmgbb70LIpkYtWa9Oq90dpmYJiKFRZRHA8IGYiCkpJxxxyXqJpxxxw0accccNGnHHHDRpxxxw0accccNGv/9k=';

          return texture;
        }

        const texture = loadTexture(gl, () => {
          render();
        });

        // Draw the scene
        function drawScene(gl, programInfo, buffers, texture) {
          gl.clearColor(0.0, 0.0, 0.0, 1.0);
          gl.clear(gl.COLOR_BUFFER_BIT);

          gl.useProgram(programInfo.program);

          gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
          gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
          gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);

          gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
          gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, 2, gl.FLOAT, false, 0, 0);
          gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);

          gl.activeTexture(gl.TEXTURE0);
          gl.bindTexture(gl.TEXTURE_2D, texture);
          gl.uniform1i(programInfo.uniformLocations.uSampler, 0);

          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }

        function render() {
          drawScene(gl, programInfo, { position: positionBuffer, textureCoord: textureCoordBuffer }, texture);
        }

        render();
      })
  },
})

最后效果: