Canvas联合webGL对图像进行缩放，保证清晰度的例子

以下是一个使用Canvas和WebGL对图像进行缩放的例子，可以保证清晰度：

HTML代码：

<canvas id="canvas"></canvas>

Javascript代码：

// 获取Canvas元素和上下文
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// 创建着色器程序
const vertexShaderSource = `
  attribute vec2 a_position;
  attribute vec2 a_texCoord;
  varying vec2 v_texCoord;
  void main() {
    gl_Position = vec4(a_position, 0, 1);
    v_texCoord = a_texCoord;
  }
`;
const fragmentShaderSource = `
  precision highp float;
  varying vec2 v_texCoord;
  uniform sampler2D u_texture;
  uniform vec2 u_resolution;
  void main() {
    vec2 texCoord = v_texCoord * u_resolution;
    vec2 dxy = vec2(1.0, 1.0) / u_resolution;
    vec4 color = vec4(0.0);
    for (float x = -2.0; x <= 2.0; x += 1.0) {
      for (float y = -2.0; y <= 2.0; y += 1.0) {
        color += texture2D(u_texture, texCoord + vec2(x, y) * dxy);
      }
    }
    gl_FragColor = color / 25.0;
  }
`;
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = createProgram(gl, vertexShader, fragmentShader);

// 获取属性和uniform的位置
const positionLocation = gl.getAttribLocation(program, 'a_position');
const texCoordLocation = gl.getAttribLocation(program, 'a_texCoord');
const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
const textureLocation = gl.getUniformLocation(program, 'u_texture');

// 创建缓冲区对象
const positionBuffer = gl.createBuffer();
const texCoordBuffer = gl.createBuffer();

// 将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);

// 将数据写入缓冲区对象
setRectangle(gl, 0, 0, canvas.width, canvas.height);
setRectangle(gl, 0, 0, 1, 1);

// 将缓冲区对象分配给属性
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(texCoordLocation);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);

// 创建纹理对象
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数
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);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 加载图片并绑定到纹理对象
const image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  draw();
};

// 绘制函数
function draw() {
  gl.useProgram(program);
  gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
  gl.uniform1i(textureLocation, 0);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

// 创建着色器函数
function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    return shader;
  }
  console.error(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

// 创建着色器程序函数
function createProgram(gl, vertexShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
    return program;
  }
  console.error(gl.getProgramInfoLog(program));
  gl.deleteProgram(program);
}

// 设置矩形函数
function setRectangle(gl, x, y, width, height) {
  const x1 = x;
  const x2 = x + width;
  const y1 = y;
  const y2 = y + height;
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    x1, y1,
    x2, y1,
    x1, y2,
    x1, y2,
    x2, y1,
    x2, y2,
  ]), gl.STATIC_DRAW);
}

上面的代码会将一张名为image.jpg的图片缩放到Canvas的大小，并保证清晰度。具体实现原理是通过WebGL的纹理过滤器来实现的。在fragment shader中，我们使用了一个2x2的高斯滤波器来对每个像素进行平均，这样可以消除锯齿，并且保证缩放后的图像质量。