Javascript 图像上的涟漪

如何在图像而不是原始画布上实现类似效果

/**
*水的涟漪效应。
*Neil Wallis的原始代码（Java）
*@linkhttp://www.neilwallis.com/java/water.html
* 
*@作者Sergey Chikuyonok（serge。che@gmail.com)
*@linkhttp://chikuyonok.ru
*/
（功能（）{
var canvas=document.getElementById（'c'），
/**@type{canvasrendingcontext2d}*/
ctx=canvas.getContext（'2d'），
宽度=400，
高度=400，
半宽度=宽度>>1，
半高=高度>>1，
尺寸=宽度*（高度+2）*2，
延迟=30，
oldind=宽度，
新风=宽度*（高度+3），
里普拉德=3，
mapind，
ripplemap=[]，
最后一张地图=[]，
涟漪
纹理
线宽=20，
步长=线宽*2，
计数=高度/线宽；
画布宽度=宽度；
canvas.height=高度；
/*
*水波演示可以使用任何位图图像
*（见以下示例：http://media.chikuyonok.ru/ripple/)
*但我需要画一些简单的艺术品来绕过1k的限制
*/
带（ctx）{
填充样式=“#a2ddf8”；
fillRect（0，0，宽度，高度）；
fillStyle='#07b'；
save（）；
旋转（-0.785）；
对于（变量i=0；i0，则波动
数据=1024——数据；
old_data=_last_map[i]；
_最后一张地图[i]=数据；
if（旧数据！=数据）{
//抵消
a=（（x-_半宽度）*数据/1024）=_高度）b=_高度-1；
如果（b<0）b=0；
新像素=（a+（b*_宽度））*4；
cur_像素=i*4；
_rd[cur_pixel]=\u td[new_pixel]；
_rd[cur_pixel+1]=_td[new_pixel+1]；
_rd[cur_pixel+2]=_td[new_pixel+2]；
}
++_mapind；
++一,；
}
}
mapind=\u mapind；
}
canvas.onmousemove=函数（/*事件*/evt）{
干扰（evt.offsetX | | evt.layerX，evt.offsetY | evt.layerY）；
};
设置间隔（运行、延迟）；
//产生随机涟漪
var rnd=数学随机；
setInterval（函数（）{
干扰（rnd（）*宽度，rnd（）*高度）；
}, 700);
})();
看看这只雄伟的独角兽：。数据URI用于避免CORS问题，它可以处理任意数量的图像（默认情况下为所有图像）

JS:

window.addEventListener（'load'，（）=>{
document.querySelectorAll（'img'）.forEach（（img）=>{
var cont=document.createElement（'div'）；
cont.style.position='relative'
cont.style.display='inline block'
img.parentNode.insertBefore（cont，img）；
img.style.verticalAlign='top'；
续附件儿童（img）
控制台目录（img）
var c=document.createElement（'canvas'）；
c、 宽度=img.clientWidth
c、 高度=img.clientHeight
c、 style.position='绝对'
c、 style.top='0px'
c、 style.left='0px'
续（c）
控制台日志（c）
makeRipple（c、img）
})
})
函数makeRipple（el、img）{
var canvas=el，
/**@type{canvasrendingcontext2d}*/
ctx=canvas.getContext（'2d'），
宽度=img.clientWidth，
高度=img.clientHeight，
半宽度=宽度>>1，
半高=高度>>1，
尺寸=宽度*（高度+2）*2，
延迟=30，
oldind=宽度，
新风=宽度*（高度+3），
里普拉德=3，
mapind，
ripplemap=[]，
最后一张地图=[]，
涟漪
纹理
线宽=20，
步长=线宽*2，
计数=高度/线宽；
画布宽度=宽度；
canvas.height=高度；
/*
*水波演示可以使用任何位图图像
*（见以下示例：http://media.chikuyonok.ru/ripple/)
*但我需要画一些简单的艺术品来绕过1k的限制
*/
ctx.drawImage（img，0,0，img.clientWidth，img.clientHeight）
纹理=ctx.getImageData（0，0，宽度，高度）；
ripple=ctx.getImageData（0，0，宽度，高度）；
对于（变量i=0；i0，则波动
数据=1024——数据；
old_data=_last_map[i]；
_最后一张地图[i]=数据；
if（旧数据！=数据）{
//抵消
a=（（x-_半宽度）*数据/1024）=_高度）b=_高度-1；
如果（b<0）b=0；
新像素=（a+（b*_宽度））*4；
cur_像素=i*4；
_rd[cur_pixel]=\u td[new_pixel]；
_rd[cur_pixel+1]=_td[new_pixel+1]；
_rd[cur_pixel+2]=_td[new_pixel+2]；
window.addEventListener('load',()=>{
  document.querySelectorAll('img').forEach((img)=>{
    var cont = document.createElement('div');
    cont.style.position = 'relative'
    cont.style.display = 'inline-block'
    img.parentNode.insertBefore(cont,img);
    img.style.verticalAlign = 'top';
    cont.appendChild(img)
    console.dir(img)
    var c = document.createElement('canvas');
    c.width = img.clientWidth
    c.height = img.clientHeight
    c.style.position = 'absolute'
    c.style.top = '0px'
    c.style.left = '0px'
    cont.appendChild(c)
    console.log(c)
    makeRipple(c,img)
  })
})

function makeRipple(el,img){

    var canvas = el,
        /** @type {CanvasRenderingContext2D} */
        ctx = canvas.getContext('2d'),
        width = img.clientWidth,
        height = img.clientHeight,
        half_width = width >> 1,
        half_height = height >> 1,
        size = width * (height + 2) * 2,
        delay = 30,
        oldind = width,
        newind = width * (height + 3),
        riprad = 3,
        mapind,
        ripplemap = [],
        last_map = [],
        ripple,
        texture,
        line_width = 20,
        step = line_width * 2, 
        count = height / line_width;

    canvas.width = width;
    canvas.height = height;

    /*
     * Water ripple demo can work with any bitmap image
     * (see example here: http://media.chikuyonok.ru/ripple/)
     * But I need to draw simple artwork to bypass 1k limitation
     */
    ctx.drawImage(img,0,0,img.clientWidth,img.clientHeight)

    texture = ctx.getImageData(0, 0, width, height);
    ripple = ctx.getImageData(0, 0, width, height);

    for (var i = 0; i < size; i++) {
        last_map[i] = ripplemap[i] = 0;
    }

    /**
     * Main loop
     */
    function run() {
      console.log('bbb')
        newframe();
        ctx.putImageData(ripple, 0, 0);
    }

    /**
     * Disturb water at specified point
     */
    function disturb(dx, dy) {
        dx <<= 0;
        dy <<= 0;

        for (var j = dy - riprad; j < dy + riprad; j++) {
            for (var k = dx - riprad; k < dx + riprad; k++) {
                ripplemap[oldind + (j * width) + k] += 512;
            }
        }
    }

    /**
     * Generates new ripples
     */
    function newframe() {
        var i, a, b, data, cur_pixel, new_pixel, old_data;

        i = oldind;
        oldind = newind;
        newind = i;

        i = 0;
        mapind = oldind;

        // create local copies of variables to decrease
        // scope lookup time in Firefox
        var _width = width,
            _height = height,
            _ripplemap = ripplemap,
            _mapind = mapind,
            _newind = newind,
            _last_map = last_map,
            _rd = ripple.data,
            _td = texture.data,
            _half_width = half_width,
            _half_height = half_height;

        for (var y = 0; y < _height; y++) {
            for (var x = 0; x < _width; x++) {
                data = (
                    _ripplemap[_mapind - _width] + 
                    _ripplemap[_mapind + _width] + 
                    _ripplemap[_mapind - 1] + 
                    _ripplemap[_mapind + 1]) >> 1;

                data -= _ripplemap[_newind + i];
                data -= data >> 5;

                _ripplemap[_newind + i] = data;

                //where data=0 then still, where data>0 then wave
                data = 1024 - data;

                old_data = _last_map[i];
                _last_map[i] = data;

                if (old_data != data) {
                    //offsets
                    a = (((x - _half_width) * data / 1024) << 0) + _half_width;
                    b = (((y - _half_height) * data / 1024) << 0) + _half_height;

                    //bounds check
                    if (a >= _width) a = _width - 1;
                    if (a < 0) a = 0;
                    if (b >= _height) b = _height - 1;
                    if (b < 0) b = 0;

                    new_pixel = (a + (b * _width)) * 4;
                    cur_pixel = i * 4;

                    _rd[cur_pixel] = _td[new_pixel];
                    _rd[cur_pixel + 1] = _td[new_pixel + 1];
                    _rd[cur_pixel + 2] = _td[new_pixel + 2];
                }

                ++_mapind;
                ++i;
            }
        }

        mapind = _mapind;
    }

    canvas.onmousemove = function(/* Event */ evt) {
      console.log('XXXX',evt.offsetX)
        disturb(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
    };

    setInterval(run, delay);

    // generate random ripples
    var rnd = Math.random;
    setInterval(function() {
      console.log('aaa')
        disturb(rnd() * width, rnd() * height);
    }, 700);

};