webgl截屏保存图片

前端webgl怎样截屏并下载图片？

    const canvas = document.createElement('canvas')
    canvas.width = 1920
    canvas.height = 1080

    const webglPlayer = new WebGLPlayer(canvas, {
      preserveDrawingBuffer: true // 这里必须设为true，如果是false，下面方法获取到的都是个空白的canvas画布
    })

方案1： 获取到webglPlayer的canvas，直接利用toDataURL方法获得图片的一个地址，再使用a标签下载。

    const { canvas } = webglPlayer
    const imgUrl = canvas.toDataURL('image/jpg')
    let link = document.createElement('a')
    link.href = imgUrl
    link.download = 'canvas下载' + '.jpg'
    link.click()

方案2： 获取webgl的像素，将像素转为图片下载。

function downloadFromPixels(gl, width, height) {
    // 获取像素，并对像素做翻转处理
    function getPixels(gl, width, height) {
      const length = width * height * 4
      const row = width * 4
      const end = (height - 1) * row
      const arr = new Uint8Array(length)
      const pixels = new Uint8Array(length)
       // 获取像素
      gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, arr)
        // 翻转，不翻转你会发现下载下来的图片是倒着的
      for (let i = 0; i < length; i += row) {
        pixels.set(arr.subarray(i, i + row), end - i)
      }
      return pixels
    }
    // 将像素转为图片url
    function pixel2Image(pixels, width, height) {
      const newCanvas = document.createElement('canvas')
      newCanvas.width = width
      newCanvas.height = height
      const ctx = newCanvas.getContext('2d')
      const imageData = ctx.createImageData(width, height)
      imageData.data.set(new Uint8ClampedArray(pixels))
      ctx.putImageData(imageData, 0, 0)
      return newCanvas.toDataURL('image/jpg')
    }
    const pixels = getPixels(gl, width, height)
    const src = pixel2Image(pixels, width, height)
    let dl = document.createElement('a')
    dl.href = src
    dl.download = 'pixels下载' + '.jpg'
    dl.click()
  }
  const { canvas, gl } = webglPlayer
  downloadFromPixels(gl, canvas.width, canvas.height)

总结：方案1比方案2简单，两种方法下载得到的图片没啥区别（从大小和质量上都一样）。