基于canvas实现波浪式绘制图片

写在最前

本次的分享是一个基于canvas的更新图片特效实现。其中主要涉及canvas中getImageData()、putImageData()、toDataURL()方法的使用。效果请看下面。
欢迎关注我的博客，不定期更新中——

PS:请在本地服务器中打开页面，因谷歌浏览器中会有跨域问题，如需node静态服务器可以参照这个地址

效果预览

点我查看源码仓库

实现流程

• 点击换肤按键，在目标图片的相应位置按照同等比例绘制一张空canvas画布
• 在画布中以波浪的形式渲染图片
• 将画布转换为图片

绘制canvas覆盖层

1.获取底图即目标图的尺寸

//当点击按钮时传递底图的宽高
var img &