javascript - 使用 JavaScript 和 Canvas 在单轴上扭曲图像

Question

我正试图找到一个 wa 来实现在 persona.co 上找到的类似效果 o在对各种搜索词进行了大量谷歌搜索之后，我怎么找不到任何可能有帮助的东西。我可以看到很多关于在 3d 空间中转换图像或拉伸(stretch)图像以适合的帖子，而不是像我需要的那样实际扭曲像素。

我最初研究过使用分割来拉开法师，但这只能平等地拉伸(stretch)图像，除非我在一个轴上做了数百个分区，然后这将不允许我将图像垂直镜像到得到相同的效果。

我目前的计划是逐个像素地运行图像，并以递增的数量垂直复制它们，然后在相反方向上移除，尽管这无疑会在不插入相邻像素的情况下导致问题。

如果有人能给我指出正确的方向或有任何想法可以帮助我入门，那就足够了。

Answer 1

如果你对自己想要的东西不太挑剔，很容易造成扭曲。

通过一次绘制一条线并更改从图像中获取线条的位置，您可以将其拉伸(stretch)到您想要的任何位置。您绘制的每条线也可以水平搜索以添加额外的 FX

以下将六个正弦波应用于图像。一次绘制一行图像。数学只是随机的，因此可以制作任何 FX。

您还可以转到 webGL，它会给您带来更强大的功能。查看此答案 https://stackoverflow.com/a/38966946/3877726

演示。做失真的所有东西都在功能显示中。 for 循环从 0 循环到 1，所有波都试图将值保持在 0 和 1 之间。只有当我从图像中获取线条并将其放在 Canvas 上时，我才通过简单地乘以将单位值转换回像素坐标.

var image = new Image();
image.src = "http://i.stack.imgur.com/jNAXA.jpg";
var iw,ih;

var easeInOut = function (x, pow) {
    x = x < 0 ? 0 : x > 1 ? 1 : x; // clamp x
	var xx = Math.pow(x,pow);
	return xx / (xx + Math.pow(1 - x, pow));
}
function display(){  // put code in here
    ctx.setTransform(1,0,0,1,0,0); // reset transform
    ctx.globalAlpha = 1;           // reset alpha
    ctx.clearRect(0,0,w,h);
    if(image.complete){
        if(ih === undefined){
            ih = image.height;
            iw = image.width;
        }
        var step = 1/ canvas.height;;
        var istep = ih / canvas.height;
        var rstep = 0;
        var y = 0;
        var yh = 0;
        var cH = canvas.height;
        var cH = canvas.height;
        var curve = Math.sin(globalTime /1020) + 1.2;
        var curve2 = Math.sin(globalTime /2217) + 1.4;
        var curve3 = Math.sin(globalTime /533) * Math.PI;
        var curve4 = (Math.sin(globalTime /731) + 1.1) * Math.PI;
        var wave = 4/(Math.PI * 1);
        var wave1 = curve4/(Math.PI * 1);
        for(var i = 0 ;i < 1; i += step){
            var wob = Math.sin(i * wave);
            var wide =  (Math.sin(i * wave1 * 3+curve3) + 1.0)*100;
            y = easeInOut(easeInOut(wob,curve),curve2);
            yh =easeInOut( easeInOut(wob+step,curve),curve2) - y;
            y *= ih;
            yh *= ih;
            ctx.drawImage(image, wide, y, iw-wide*2, yh, 0, i*cH, canvas.width, step*cH);
        }
 
    }
}




function update(timer){ // Main update loop
    globalTime = timer;
    display();  // call demo code
    requestAnimationFrame(update);
}





const RESIZE_DEBOUNCE_TIME = 100;
var w,h,cw,ch,canvas,ctx,createCanvas,resizeCanvas,setGlobals,globalTime=0,resizeCount = 0; 
createCanvas = function () { 
    var c,cs; cs = (c = document.createElement("canvas")).style; 
    cs.position = "absolute"; 
    cs.top = cs.left = "0px"; 
    cs.zIndex = 1000; 
    document.body.appendChild(c); 
    return c;
    
}
resizeCanvas = function () {
    if (canvas === undefined) { 
        canvas = createCanvas(); 
        
    } 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    ctx = canvas.getContext("2d"); 
    if (typeof setGlobals === "function") { setGlobals(); }
    if (typeof onResize === "function"){ 
        resizeCount += 1; 
        setTimeout(debounceResize,RESIZE_DEBOUNCE_TIME);
        
    }
}
function debounceResize(){ 
    resizeCount -= 1; 
    if(resizeCount <= 0){ onResize();}
}
setGlobals = function(){ 
    cw = (w = canvas.width) / 2; 
    ch = (h = canvas.height) / 2; 
}

resizeCanvas(); 
window.addEventListener("resize",resizeCanvas); 
requestAnimationFrame(update);