Base64 图像到 WebGL 上下文（用于 readPixels）答案

【问题标题】：Base64 image to WebGL context (for readPixels)Base64 图像到 WebGL 上下文（用于 readPixels）
【发布时间】：2016-11-24 23:45:26
【问题描述】：

一张图片是Base64格式的，我想比较一下像素关系。

在阅读了有关 GPU 工作原理的文章后，我认为这种类型的分析在画布 webgl 上下文中表现最好，而不是像我之前使用的 2d。我以前没有使用过 WebGL，我知道它的级别非常低。

有谁知道将 Base64 放入 webgl 上下文的有效方法，我可以在其中 .readPixels 并与这 100 万像素进行迭代/比较？

谢谢

【问题讨论】：

如果您之前没有使用过 WebGL，那么您的问题就太宽泛了。这就像说“我以前从未编程过。告诉我如何比较图像”。首先你需要learn webgl 然后回来问一些不那么广泛的问题。

标签： javascript performance canvas computer-vision webgl

【解决方案1】：

您可以做的是将图像放入纹理中，使用着色器计算差异，然后从帧缓冲区（使用readPixels）读取它们并将它们相加，例如计算误差。

要放置Base64编码的图像，你需要创建一个Image对象，然后将它分配给一个纹理：

var image = new Image();
// You can omit using onload and asynchronous code,
// but unfortunately it's not fully reliable :(
image.onload = function () {
    /* ... */
};
// Here you'll need to know format of the image (png, jpeg...).
image.src = 'data:image/jpeg;base64,' + base64EncodedImage;

// gl here is the context
var textureId = gl.createTexture();
gl.bindTexture(gl.TEXTURE2D, texture);
gl.texImage2D(gl.TEXTURE2D, /* ... */, image);

之后，您可以使用上传的图像（甚至渲染的图像）来计算差异，例如，该着色器：

// texture coordinates
varying vec2 uv;

uniform sampler2D texture1;
uniform sampler2D texture2;

void main(void) {
    vec4 texel1 = texture2D(texture1, uv);
    vec4 texel2 = texture2D(texture2, uv);
    gl_FragColor = abs(texel1 - texel2);
}

比你从帧缓冲区读取差异数据：

var diffData = new Uint8Array();
gl.readPixels(/* ... */, diffData);

// Process diffData...

但是，如果这是您第一次使用 WebGL，我强烈建议您遵循 gman 的建议并学习 WebGL 本身。这是一项强大的技术，并且知道它将成为您工具箱中的好工具:)

【讨论】：