https://www.imququ.com/post/shake_photo_in_little_js.html

bobo

function BoBo(){this._init.apply(this,arguments)}BoBo.prototype=function(){return{_init:function(e,t){this.imgSrc=e,this.container=document.getElementById(t);if(!this.container){alert("canvas容器不存在！");return}this.shakeAngle=0,this.shakeRange=.45,this.shakeRangeDelay=.995,this.shakeAngleSpeed=.65,this.shakeAngleDelay=.995,this.interval=40,this.controlRects=[]},_getPointRGB:function(e,t){e=Math.floor(e),t=Math.floor(t);var n=this.imageData.data,r=[],s=(t*this.canvasWidth+e)*4;for(i=s;i<s+3;i++)r.push(n[i]);return r},_setRectPointRGB:function(e,t,n,r){t=Math.floor(t),n=Math.floor(n);var i=this.rectImageData[e],s=this.controlRects[e],o=s.width,t=t-s.x,n=n-s.y,u=(n*o+t)*4;i.data[u]=r[0],i.data[u+1]=r[1],i.data[u+2]=r[2],i.data[u+3]=255},_makeRectShake:function(e,t){var n=this.controlRects[e],r=n.width*.5,i=n.height*.5,s={x:n.x+r,y:n.y+i},o=Math.PI*2,u=Math.PI/(2*(r+i));for(var a=0;a<o;a+=u){var f={x:r*Math.cos(a),y:i*Math.sin(a)},l={x:t.x-s.x,y:t.y-s.y},c={x:f.x-l.x,y:f.y-l.y},h=1/Math.max(Math.abs(c.x),Math.abs(c.y));for(var p=0;p<=1;p=Math.min(1,p+h)){var d=f.x*p,v=f.y*p,m=c.x*p,g=c.y*p;d+=s.x,v+=s.y,m+=t.x,g+=t.y;var y=this._getPointRGB(d,v);this._setRectPointRGB(e,m,g,y);if(p==1)break}}},_makeShake:function(){var e=this.controlRects.length;for(var t=0;t<e;t++){var n=this.controlRects[t],r=n.width*.5,i=n.height*.5,s={x:n.x+r,y:n.y+i},o=r*this.shakeRange,u=i*this.shakeRange,a={x:s.x+Math.cos(this.shakeAngle)*o,y:s.y+Math.cos(this.shakeAngle)*u};this._makeRectShake(t,a)}this.shakeAngle+=this.shakeAngleSpeed,this.shakeAngle>360&&(this.shakeAngle-=360),this.shakeAngleSpeed*=this.shakeAngleDelay,this.shakeRange*=this.shakeRangeDelay,this.shakeRange<.1&&this.stop()},_getRectImageData:function(){this.rectImageData=[];for(var e=0;e<this.controlRects.length;e++){var t=this.controlRects[e],n=this.canvasContext.getImageData(t.x,t.y,t.width,t.height);this.rectImageData.push(n)}},_putRectImageData:function(){for(var e=0;e<this.controlRects.length;e++){var t=this.controlRects[e],n=this.rectImageData[e];this.canvasContext.putImageData(n,t.x,t.y)}},_showDebug:function(){var e=this,t=document.getElementById("avg");this.totalTimes=0,this.totalTime=0,setInterval(function(){e.totalTimes<=0?t.innerHTML="未运行":t.innerHTML=e.totalTimes+"帧/秒；"+parseInt(e.totalTime/e.totalTimes)+"ms/帧",e.totalTimes=0,e.totalTime=0},1e3)},_run:function(){var e=this;this._debug?this._timer=setInterval(function(){e.totalTimes++;var t=new Date;e._getRectImageData(),e._makeShake(),e._putRectImageData(),e.totalTime+=new Date-t},this.interval):this._timer=setInterval(function(){e._getRectImageData(),e._makeShake(),e._putRectImageData()},this.interval)},addControl:function(e){this.controlRects.push(e)},start:function(){var e=this;if(!this.controlRects.length){alert("图片没有任何控制点！");return}if(!this._inited){var t=new Image;t.onload=function(){var n=t.width,r=t.height,i=document.createElement("canvas"),s=i.getContext("2d");i.width=n,i.height=r,s.drawImage(t,0,0),e.container.appendChild(i),e.canvasWidth=n,e.canvasHeight=r,e.canvasContext=s,e.imageData=s.getImageData(0,0,n,r),e._inited=!0,e._run()},t.src=this.imgSrc,this._debug&&this._showDebug()}else e._run()},reset:function(){this.stop(),this.canvasContext.putImageData(this.imageData,0,0)},stop:function(){clearInterval(this._timer)}}}();