Html5 canvas Webgl中的图像裁剪

二维画布提供了一个名为draw image的api： 绘图图像（img、sx、sy、swidth、sheigh、x、y、宽度、高度）； 其中sx是图像剪辑开始的位置

,

我正在尝试使用webgl使用texImage2D渲染2D图像。我想检查是否有办法使用webgl实现剪辑

我正在使用以下教程使用webgl渲染2d图像。

原始图像：

使用drawImage进行剪裁（2D）：

使用webgl进行剪辑：

var-gl、程序、位置、原始图像纹理、画布；
var x=10；
变量y=20；
函数setupWebGL（）{
var canvas=document.getElementById（“canvas”）；
gl=canvas.getContext（“webgl”）；
如果（！gl）{
返回；
}
//安装GLSL程序
var program=createProgramFromScripts（gl，[“2d顶点着色器”、“2d片段着色器”]）；
gl.useProgram（程序）；
//查找顶点数据需要去的地方。
positionLocation=gl.GetAttriblLocation（程序，“a_位置”）；
texCoordLocation=gl.GetAttriblLocation（程序，“a_texCoord”）；
var texture=gl.createTexture（）；
gl.bindTexture（gl.TEXTURE_2D，纹理）；
//查找制服
var resolutionLocation=gl.getUniformLocation（程序，“u_resolution”）；
textureSizeLocation=gl.getUniformLocation（程序，“u_textureSize”）；
colorLocation=gl.getUniformLocation（程序，“u_颜色”）；
//制定决议
gl.uniform2f（分辨率位置、画布宽度、画布高度）；
//设置参数，以便我们可以渲染任意大小的图像。
gl.texParameteri（gl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE）；
gl.texParameteri（gl.TEXTURE\u 2D、gl.TEXTURE\u WRAP\u T、gl.CLAMP\u至边缘）；
gl.texParameteri（gl.TEXTURE\u 2D，gl.TEXTURE\u MIN\u过滤器，gl.NEAREST）；
gl.texParameteri（gl.TEXTURE\u 2D，gl.TEXTURE\u MAG\u过滤器，gl.NEAREST）；
总账启用（总账混合）；
gl.混合方程式（gl.FUNC_添加）；
gl.blendFunc（gl.SRC_ALPHA，gl.1减去gl.SRC_ALPHA）；
gl.禁用（gl.深度测试）；
}
函数绘图（）{
//使用画布模拟图像
var image=document.createElement（“画布”）；
document.body.appendChild（image）；//这样我们就可以看到源图像了
image.width=200；
image.height=150；
var ctx=image.getContext（“2d”）；
ctx.fillRect（0，0，image.width，image.height）；
对于（变量py=0；py
canvas{边框：1px纯黑；}

属性向量2 a_位置；
属性向量2 a_texCoord；
均匀vec2u_分辨率；
可变矢量2 v_texCoord；
void main（）{
//将矩形从像素转换为0.0到1.0
vec2 zeroToOne=a_位置/u_分辨率；
//从0->1转换为0->2
vec2 zeroToTwo=zeroToOne*2.0；
//从0->2转换为-1->+1（剪辑空间）
vec2 clipSpace=zeroToTwo-1.0；
gl_Position=vec4（clipSpace*vec2（1，-1），0，1）；
//将texCoord传递给片段着色器
//GPU将在点之间插值该值。
v_texCoord=a_texCoord；
}
精密中泵浮子；
//我们的质地
均匀采样二维u_图像；
//从顶点着色器传入的texCoords。
可变矢量2 v_texCoord；
void main（）{
gl_FragColor=纹理2D（u_图像，v_texCoord）；
}

纹理坐标从0变为1，因此如果要从
drawImage
转换，则

drawImage(image, srcX, srcY, srcWidth, srcHeight, 
          dstX, dstY, dstWidth, dstHeight);

在WebGL中，您必须使用
src
值调整texcoord，并使用
dst
值调整绘制位置的顶点坐标

u0 = srcX / image.width;
v0 = srcY / image.height;

u1 = (srcX + srcWidth) / image.width;
v1 = (srcY + srcHeight) / image.height;

现在更新你的texcoords。在链接到的示例中

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  u0,  v0,
  u1,  v0,
  u0,  v1,
  u0,  v1,
  u1,  v0,
  u1,  v1]), gl.STATIC_DRAW);

您还可以向着色器添加一些数学。使用可以使用数学来调整着色器中的纹理坐标，就像那些文章调整位置一样

例如，你可以让UV坐标从0到1保持原来的状态，但要更新着色器，这样你就可以通过偏移量和比例将它们相乘，从而得到你想要的位置。或者，如果你继续做那些艺术
var u1 = (50 + image.width) / image.width;

setRectangle( gl, x, y, image.width, image.height);