Question

图像采用Base64格式，我想比较像素关系。

在阅读了GPU如何工作之后，我认为这种类型的分析在画布webgl上下文中表现最佳，而不是像以前那样使用2d。我之前没有使用过WebGL，我知道它的水平非常低。

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

由于

Answer 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本身。它是一项功能强大的技术，并且知道它将成为您工具箱中的一个好工具：）

Base64图像到WebGL上下文（对于readPixels）

1 个答案: