通過使用javascript將投影變換應用於CSS來正確透視

Question

我希望通過選擇正方形的3d表示的4個點並將它們映射到2d正方形的點來校正圖像的透視圖。

我已經關注了兩個非常豐富的例子但是無法重現所需的結果，這里是原始的例子以及我對jsfiddle的改編：

• 示例1 （ 描述解決方案的文章 ）：此示例顯示（在CoffeeScript中）如何更正視頻的透視圖，因此此示例與我需要的非常相似。 這是我對它的改編，你必須從棋盤的左上角順時針點擊4個角落： 我的jsfiddle改編

   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(", ") + ")"; } 

• 示例2 （ 描述解決方案的文章 ）：此示例顯示如何將透視應用於沒有的元素，因此我的問題與此相反。 然而，似乎一般變換將一組點應用於另一組，所以我的理解是這應該是等價的...但我可能在某處錯了！ 在這里，你必須從棋盤的左上角開始順時針點擊4個角： 我的jsfiddle改編

   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個角落，第4次點擊觸發對該四邊形的裁剪然后計算並應用其目標是使扭曲的四邊形回到2d方形。

謝謝，特普。

Answer 1

這個關於堆棧溢出的答案似乎可以做你想要的，即“逆透視變換”： 從3d透視圖重繪到2d

正如你所看到的，答案的作者（你在例2中引用的那個）使用了不同的逆變換方程：C = A∙B - 1而不是C = B∙A -1