我正在寻找一种方法，在网页上拍摄图像或图像的一部分，并渲染此或类似的动画效果，其中图像为“波浪形”。例子:
“灵”区:
袍区 :
袍区 :
最好我想参数化地控制波的速度和调制。
对我来说，它看起来像是某种置换贴图。我想过使用片段着色器 threejs\seriously.js或使用 Canvas 元素来实现相同的图像处理，但我不确定要使用的算法。
实现这一目标的方法是什么？
最佳答案
振荡器和位移
您可以通过将振荡器与网格结合使用来解决此问题。网格中的每条线都是振荡的，线之间的差异用于置换图像的一部分。
在我看来，最简单的方法是首先创建一个振荡器对象。它可以是非常基本的，但重点是对象可以被实例化，并且它在本地跟踪当前值。
第 1 步:振荡器对象
function Osc(speed) {
var frame = 0; // pseudo frame to enable animation
this.current = function(x) { // returns current sinus value
frame += 0.005 * speed; // value to tweak..
return Math.sin(frame + x * speed);
};
}
例如，扩展对象以使用频率、幅度和速度作为参数。如果要使用许多，还可以考虑原型(prototype)方法。
如果我们创建一个包含五个位置的简单网格，其中三个中间垂直线正在振荡(边缘，分别为 1. 和 5. 线)，我们将得到如下结果(未调整值):
振荡网格线的动画可视化:
function Osc(speed) {
var frame = 0;
this.current = function(x) {
frame += 0.005 * speed;
return Math.sin(frame + x * speed);
};
}
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
w = canvas.width,
h = canvas.height;
var o1 = new Osc(0.05), // oscillator 1
o2 = new Osc(0.03), // oscillator 2
o3 = new Osc(0.06); // oscillator 3
(function loop() {
ctx.clearRect(0, 0, w, h);
for (var y = 0; y < h; y++) {
ctx.fillRect(w * 0.25 + o1.current(y * 0.2) * 10, y, 1, 1);
ctx.fillRect(w * 0.50 + o2.current(y * 0.2) * 10, y, 1, 1);
ctx.fillRect(w * 0.75 + o3.current(y * 0.2) * 10, y, 1, 1);
}
requestAnimationFrame(loop);
})();<canvas width=230 height=250></canvas>第 2 步:使用网格中线条之间的差异作为图像
下一步是简单地计算每条线生成的点之间的差异。
数学很简单，我们唯一需要确保的是线条不重叠，因为这会产生负宽度:
// initial static values representing the grid line positions:
var w = canvas.width, h = canvas.height,
x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w;
// absolute positions for wavy lines
var lx1 = x1 + o1.current(y*0.2); // 0.2 is arbitrary and tweak-able
var lx2 = x2 + o2.current(y*0.2);
var lx3 = x3 + o3.current(y*0.2);
// calculate each segment's width
var w0 = lx1; // - x0
var w1 = lx2 - lx1;
var w2 = lx3 - lx2;
var w3 = x4 - lx3;
如果我们现在将这些值提供给
drawImage()对于目的地，使用静态固定宽度(即网格单元格大小)作为源，我们将得到如下结果。我们不需要将位图中的像素迭代为
drawImage()可以是硬件加速，不需要满足 CORS 要求，并且会为我们做插值:var img = new Image();
img.onload = waves;
img.src = "//i.imgur.com/PwzfNTk.png";
function waves() {
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
w = canvas.width,
h = canvas.height;
ctx.drawImage(this, 0, 0);
var o1 = new Osc(0.05), o2 = new Osc(0.03), o3 = new Osc(0.06),
x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w;
(function loop() {
ctx.clearRect(0, 0, w, h);
for (var y = 0; y < h; y++) {
// segment positions
var lx1 = x1 + o1.current(y * 0.2) * 3; // scaled to enhance demo effect
var lx2 = x2 + o2.current(y * 0.2) * 3;
var lx3 = x3 + o3.current(y * 0.2) * 3;
// segment widths
var w0 = lx1;
var w1 = lx2 - lx1;
var w2 = lx3 - lx2;
var w3 = x4 - lx3;
// draw image lines ---- source ---- --- destination ---
ctx.drawImage(img, x0, y, x1 , 1, 0 , y, w0, 1);
ctx.drawImage(img, x1, y, x2 - x1, 1, lx1 - 0.5, y, w1, 1);
ctx.drawImage(img, x2, y, x3 - x2, 1, lx2 - 1 , y, w2, 1);
ctx.drawImage(img, x3, y, x4 - x3, 1, lx3 - 1.5, y, w3, 1);
}
requestAnimationFrame(loop);
})();
}
function Osc(speed) {
var frame = 0;
this.current = function(x) {
frame += 0.002 * speed;
return Math.sin(frame + x * speed * 10);
};
}<canvas width=230 height=300></canvas>请注意，由于我们使用的是分数值，因此我们需要用半个像素进行补偿以与前一个段重叠，因为可能会插入结束像素。否则我们将在结果中看到可见的波浪线。我们可以使用整数值，但这会产生更“锯齿”的动画。
振荡器的值当然需要调整，定义网格大小等等。
下一步将是重复水平轴的振荡器，并使用 Canvas 本身作为图像源。
优化和性能
使用 Canvas 本身作为源警告
根据 specs，当您从 Canvas 向自身绘制某些内容时，浏览器必须这样做。 ，制作当前内容的副本，将其用作目标区域的源。
When a canvas or CanvasRenderingContext2D object is drawn onto itself, the drawing model requires the source to be copied before the image is drawn, so it is possible to copy parts of a canvas or scratch bitmap onto overlapping parts of itself.
这意味着对于每个
drawImage()我们使用 Canvas 本身作为源的操作，这个复制过程就会发生。这可能会影响性能，因此为了避免这种情况，我们可以使用第二个 Canvas 元素，我们首先将完成的垂直传递复制到该元素，然后使用第二个 Canvas 作为水平传递的源。
LUT 和值缓存
为了进一步提高性能，缓存每个可以缓存的值计算。例如，上面每个段(x1-x0 等)的源宽度可以缓存到
sw变量(或其他名称)。这就是所谓的微优化，但在这种情况下，这些很重要。对于正弦值、比例等，将计算缓存到 LUT 或查找表中可能是一个优势。可以选择频率，以便表格长度在某个级别匹配。我没有在这里展示这一点，但是如果浏览器难以跟上网格的分辨率，则需要考虑一些问题。
整数值
使用整数值并关闭图像平滑也是一种选择。结果不如分数值好，但它会给动画带来复古的外观并且性能更好。
Sprite 表
作为最后的手段，动态预生成帧作为 Sprite 表是可能的。这会占用更多内存并且有初始成本，但几乎在任何情况下都能顺利运行。挑战在于找到一个循环点而不是使用太多内存。
带有 alpha channel 的图像
避免使用 alpha channel 的图像(如下面的演示所示)会有所帮助，因为您需要额外清除两次，一次用于屏幕外 Canvas ，另一次用于主 Canvas 。否则之前的位移将显示在背景中。
最终结果演示
这是一个包含垂直和水平波浪线的完整演示。为简单起见，我只使用 4x4 网格。
结果看起来与示例并不完全相同，但应该给出一个想法。这只是增加网格分辨率和调整参数的问题。此外，问题中给出的示例预先设置了附加效果和图层的动画，这是仅靠波浪/位移无法实现的。
其他变化是，现在每个段的重叠通过在开始和结束时仅添加 0.5 来扩展到整个段。水平传递也到内联宽度差。
点击整页当您运行下面的演示以更好地查看细节时。
var img = new Image();
img.onload = waves;
img.src = "//i.imgur.com/nMZoUok.png";
function waves() {
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
w = canvas.width,
h = canvas.height;
ctx.drawImage(this, 0, 0);
var o1 = new Osc(0.05), o2 = new Osc(0.03), o3 = new Osc(0.06), // osc. for vert
o4 = new Osc(0.08), o5 = new Osc(0.04), o6 = new Osc(0.067), // osc. for hori
// source grid lines
x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w,
y0 = 0, y1 = h * 0.25, y2 = h * 0.5, y3 = h * 0.75, y4 = h,
// cache source widths/heights
sw0 = x1, sw1 = x2 - x1, sw2 = x3 - x2, sw3 = x4 - x3,
sh0 = y1, sh1 = y2 - y1, sh2 = y3 - y2, sh3 = y4 - y3,
vcanvas = document.createElement("canvas"), // off-screen canvas for 2. pass
vctx = vcanvas.getContext("2d");
vcanvas.width = w; vcanvas.height = h; // set to same size as main canvas
(function loop() {
ctx.clearRect(0, 0, w, h);
for (var y = 0; y < h; y++) {
// segment positions
var lx1 = x1 + o1.current(y * 0.2) * 2.5,
lx2 = x2 + o2.current(y * 0.2) * 2,
lx3 = x3 + o3.current(y * 0.2) * 1.5,
// segment widths
w0 = lx1,
w1 = lx2 - lx1,
w2 = lx3 - lx2,
w3 = x4 - lx3;
// draw image lines
ctx.drawImage(img, x0, y, sw0, 1, 0 , y, w0 , 1);
ctx.drawImage(img, x1, y, sw1, 1, lx1 - 0.5, y, w1 + 0.5, 1);
ctx.drawImage(img, x2, y, sw2, 1, lx2 - 0.5, y, w2 + 0.5, 1);
ctx.drawImage(img, x3, y, sw3, 1, lx3 - 0.5, y, w3 + 0.5, 1);
}
// pass 1 done, copy to off-screen canvas:
vctx.clearRect(0, 0, w, h); // clear off-screen canvas (only if alpha)
vctx.drawImage(canvas, 0, 0);
ctx.clearRect(0, 0, w, h); // clear main (onlyif alpha)
for (var x = 0; x < w; x++) {
var ly1 = y1 + o4.current(x * 0.32),
ly2 = y2 + o5.current(x * 0.3) * 2,
ly3 = y3 + o6.current(x * 0.4) * 1.5;
ctx.drawImage(vcanvas, x, y0, 1, sh0, x, 0 , 1, ly1);
ctx.drawImage(vcanvas, x, y1, 1, sh1, x, ly1 - 0.5, 1, ly2 - ly1 + 0.5);
ctx.drawImage(vcanvas, x, y2, 1, sh2, x, ly2 - 0.5, 1, ly3 - ly2 + 0.5);
ctx.drawImage(vcanvas, x, y3, 1, sh3, x, ly3 - 0.5, 1, y4 - ly3 + 0.5);
}
requestAnimationFrame(loop);
})();
}
function Osc(speed) {
var frame = 0;
this.current = function(x) {
frame += 0.002 * speed;
return Math.sin(frame + x * speed * 10);
};
}html, body {width:100%;height:100%;background:#555;margin:0;overflow:hidden}
canvas {background:url(https://i.imgur.com/KbKlmpk.png);background-size:cover;height:100%;width:auto;min-height:300px}<canvas width=230 height=300></canvas>关于javascript - 如何重新创建此 "wavy"图像效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29586754/