javascript - 使用 javascript 将投影变换应用于 CSS 来纠正透视

Question

我希望通过选择正方形 3d 表示的 4 个点并将这些点映射到 2d 正方形来校正图像的透视。

我遵循了两个非常丰富的示例，但无法重现所需的结果，以下是原始示例以及我对 jsfiddle 上的示例的改编:

• example 1 ( article describing the solution ):这个例子展示了(在 CoffeeScript 中)如何纠正视频的视角，所以这个例子与我需要的非常相似。这是我的改编，你必须从棋盘左上角开始顺时针点击4个 Angular :my jsfiddle adaptation

  var srcImg, width, height, srcCvs, srcC, srcRect, dstCvs, dstC, widthToHeight;
  var nbClicks = 0, coordinates = Array( 8 );
  
  srcImg = document.getElementById( 'sourceImg' );
  widthToHeight = srcImg.width / srcImg.height;
  
  srcCvs = document.getElementById( 'sourceCanvas' );
  srcC = srcCvs.getContext( '2d' );
  dstCvs = document.getElementById( 'destinationCanvas' );
  dstC = dstCvs.getContext( '2d' );
  
  width = srcCvs.width = dstCvs.width = srcCvs.clientWidth;
  height = srcCvs.height = dstCvs.height = srcCvs.clientWidth / widthToHeight;
  srcRect = srcCvs.getBoundingClientRect();
  srcC.strokeStyle = '#0f0';
  srcC.drawImage( srcImg, 0, 0, width, height );
  srcCvs.addEventListener( 'click', doClick, false );
  
  function doClick( event ) {
    if ( nbClicks < 4 ) {
      coordinates[ nbClicks * 2 ] = ( event.clientX - srcRect.left ) * width / srcRect.width;
      coordinates[ nbClicks * 2 + 1 ] = ( event.clientY - srcRect.top ) * height / srcRect.height;
      srcC.strokeRect( coordinates[ nbClicks * 2 ] - 10, coordinates[ nbClicks * 2 + 1 ] - 10, 20, 20 );
    }
    if ( ++nbClicks == 4 ) {
      dstC.beginPath();
      dstC.moveTo( coordinates[ 0], coordinates[ 1 ] );
      for( i = 1; i < 4; i ++ ) {
        dstC.lineTo( coordinates[ i*2 ], coordinates[ i*2 + 1 ] );
      }
      dstC.closePath();
      dstC.clip();
  
      var t = getTransform( left, top, w, h );
  
      dstCvs.style.visibility = 'visible';
      dstC.drawImage( srcImg, 0, 0, width, height );
      var left = 0, top = 0, w = width, h = width;
          srcC.strokeStyle = '#f00';
      srcC.strokeRect( left - 10, top - 10, 20, 20 );
      srcC.strokeRect( left + w - 10, top - 10, 20, 20 );
      srcC.strokeRect( left + w - 10, top + h - 10, 20, 20 );
      srcC.strokeRect( left - 10, top + h - 10, 20, 20 );
          alert( 'Clipped image is now drawn, going to apply transform after this alert.' );
      var t = getTransform( left, top, w, w );
      dstCvs.style.transform = t;
    }
  };
  
  function getTransform( left, top, w, h ) {
    var minX = Math.min( coordinates[ 0 ], coordinates[ 6 ] );
    var minY = Math.min( coordinates[ 1 ], coordinates[ 3 ] );
    var w = Math.max( Math.abs( coordinates[ 2 ] - coordinates[ 0 ] ), Math.abs( coordinates[ 6 ] - coordinates[ 4 ] ) );
    var h = Math.max( Math.abs( coordinates[ 3 ] - coordinates[ 1 ] ), Math.abs( coordinates[ 7 ] - coordinates[ 5 ] ) );
    var c = coordinates;
    for ( var i = 0; i < 4; i ++ ) {
      c[ i * 2 ] = coordinates[ i ] - minX;
      c[ i * 2 + 1 ] = coordinates[ i * 2 + 1 ] - minY;
    }
    var l=t=0;
  
    var from = c;
    var to = [ left, top, left + w, top, left + w, top + h, left, top + h ];
    A = [];
    b = [];
    for ( var i = 0; i < 4; i ++ ) {
      A.push( [ from[ i * 2 ], from[ i * 2 + 1 ], 1, 0, 0, 0, -from[ i * 2 ] * to[ i * 2 ], -from[ i * 2 + 1 ] * to[ i * 2 ] ] );
      A.push( [ 0, 0, 0, from[ i * 2 ], from[ i * 2 + 1 ], 1, -from[ i * 2 ] * to[ i * 2 + 1 ], -from[ i * 2 + 1 ] * to[ i * 2 + 1 ] ] );
      b.push( to[ i * 2 ] );
      b.push( to[ i * 2 + 1 ] );
    }
    h = numeric.solve(A, b);
    H = [[h[0], h[1], 0, h[2]],
         [h[3], h[4], 0, h[5]],
         [   0,    0, 1,    0],
         [h[6], h[7], 0,    1]];                
  
    return "matrix3d(" + H.join(", ") + ")";
  }
  

• example 2 ( article describing the solution ):这个示例展示了如何将透视应用于没有透视的元素，所以我的问题与此相反。然而，似乎一般变换将一组点应用于另一组点，所以我的理解是这应该是等效的......但我可能在某个地方错了!在这里，您必须再次从棋盘的左上角开始顺时针单击四个 Angular :my jsfiddle adaptation

  var srcImg, width, height, srcCvs, srcC, srcRect, dstCvs, dstC, widthToHeight;
  var nbClicks = 0, coordinates = Array( 8 );
  
  srcImg = document.getElementById( 'sourceImg' );
  widthToHeight = srcImg.width / srcImg.height;
  
  srcCvs = document.getElementById( 'sourceCanvas' );
  srcC = srcCvs.getContext( '2d' );
  dstCvs = document.getElementById( 'destinationCanvas' );
  dstC = dstCvs.getContext( '2d' );
  
  width = srcCvs.width = dstCvs.width = srcCvs.clientWidth;
  height = srcCvs.height = dstCvs.height = srcCvs.clientWidth / widthToHeight;
  srcRect = srcCvs.getBoundingClientRect();
  srcC.strokeStyle = '#0f0';
  srcC.drawImage( srcImg, 0, 0, width, height );
  srcCvs.addEventListener( 'click', doClick, false );
  
  function doClick( event ) {
    if ( nbClicks < 4 ) {
      coordinates[ nbClicks * 2 ] = ( event.clientX - srcRect.left ) * width / srcRect.width;
      coordinates[ nbClicks * 2 + 1 ] = ( event.clientY - srcRect.top ) * height / srcRect.height;
      srcC.strokeRect( coordinates[ nbClicks * 2 ] - 10, coordinates[ nbClicks * 2 + 1 ] - 10, 20, 20 );
    }
    if ( ++nbClicks == 4 ) {
      dstC.beginPath();
      dstC.moveTo( coordinates[ 0], coordinates[ 1 ] );
      for( i = 1; i < 4; i ++ ) {
        dstC.lineTo( coordinates[ i*2 ], coordinates[ i*2 + 1 ] );
      }
      dstC.closePath();
      dstC.clip();
      dstCvs.style.visibility = 'visible';
      dstC.drawImage( srcImg, 0, 0, width, height );
      var left = 0, top = 0, w = width, h = width;
          srcC.strokeStyle = '#f00';
      srcC.strokeRect( left - 10, top - 10, 20, 20 );
      srcC.strokeRect( left + w - 10, top - 10, 20, 20 );
      srcC.strokeRect( left + w - 10, top + h - 10, 20, 20 );
      srcC.strokeRect( left - 10, top + h - 10, 20, 20 );
          alert( 'Clipped image is now drawn, going to apply transform after this alert. On the left canvas, the positions of the mapped points are drawn in red.' );
      var t = getTransform( left, top, w, h );
      dstCvs.style.transform = t;
    }
  };
  
  function adj(m) { // Compute the adjugate of m
    return [
      m[4]*m[8]-m[5]*m[7], m[2]*m[7]-m[1]*m[8], m[1]*m[5]-m[2]*m[4],
      m[5]*m[6]-m[3]*m[8], m[0]*m[8]-m[2]*m[6], m[2]*m[3]-m[0]*m[5],
      m[3]*m[7]-m[4]*m[6], m[1]*m[6]-m[0]*m[7], m[0]*m[4]-m[1]*m[3]
    ];
  }
  function multmm(a, b) { // multiply two matrices
    var c = Array(9);
    for (var i = 0; i != 3; ++i) {
      for (var j = 0; j != 3; ++j) {
        var cij = 0;
        for (var k = 0; k != 3; ++k) {
          cij += a[3*i + k]*b[3*k + j];
        }
        c[3*i + j] = cij;
      }
    }
    return c;
  }
  function multmv(m, v) { // multiply matrix and vector
    return [
      m[0]*v[0] + m[1]*v[1] + m[2]*v[2],
      m[3]*v[0] + m[4]*v[1] + m[5]*v[2],
      m[6]*v[0] + m[7]*v[1] + m[8]*v[2]
    ];
  }
  function pdbg(m, v) {
    var r = multmv(m, v);
    return r + " (" + r[0]/r[2] + ", " + r[1]/r[2] + ")";
  }
  function basisToPoints(x1, y1, x2, y2, x3, y3, x4, y4) {
    var m = [
      x1, x2, x3,
      y1, y2, y3,
       1,  1,  1
    ];
    var v = multmv(adj(m), [x4, y4, 1]);
    return multmm(m, [
      v[0], 0, 0,
      0, v[1], 0,
      0, 0, v[2]
    ]);
  }
  function general2DProjection(
    x1s, y1s, x1d, y1d,
    x2s, y2s, x2d, y2d,
    x3s, y3s, x3d, y3d,
    x4s, y4s, x4d, y4d
  ) {
    var s = basisToPoints(x1s, y1s, x2s, y2s, x3s, y3s, x4s, y4s);
    var d = basisToPoints(x1d, y1d, x2d, y2d, x3d, y3d, x4d, y4d);
    return multmm(d, adj(s));
  }
  function project(m, x, y) {
    var v = multmv(m, [x, y, 1]);
    return [v[0]/v[2], v[1]/v[2]];
  }
  function getTransform( left, top, w, h ) {
    var x1 = coordinates[ 0 ], y1 = coordinates[ 1 ];
    var x2 = coordinates[ 2 ], y2 = coordinates[ 3 ];
    var x3 = coordinates[ 4 ], y3 = coordinates[ 5 ];
    var x4 = coordinates[ 6 ], y4 = coordinates[ 7 ];
  
    var t = general2DProjection
      (left, top, x1, y1, w, top, x2, y2, w, h, x3, y3, left, h, x4, y4);
    for(i = 0; i != 9; ++i) t[i] = t[i]/t[8];
    t = [t[0], t[3], 0, t[6],
         t[1], t[4], 0, t[7],
         0   , 0   , 1, 0   ,
         t[2], t[5], 0, t[8]];
    t = "matrix3d(" + t.join(", ") + ")";
    return t;
  }
  

只是为了尽可能清楚:在我的两次改编中，我单击棋盘的 4 个 Angular ，该 Angular 因透视而扭曲，第四次单击触发对该四边形的剪切，然后计算并应用变换其目标是将扭曲的四边形恢复为二维正方形。

谢谢，泰普。

Answer 1

这个关于堆栈溢出的答案似乎做了你想要的，即“逆透视变换”: Redraw image from 3d perspective to 2d

正如您所看到的，答案的作者(与您在示例 2 中引用的答案相同)使用了不同的逆变换方程:C = A∙B⁻1 而不是 C = B∙A⁻1