js实现图片虚化_js canvas画布实现高斯模糊效果

最近项目中有一个需求是实现图片的局部模糊效果，看上去一个挺难的效果。在实现局部模糊效果前，首先能够实现全部模糊。经过和度娘的一番较劲后，找到了一个不错的案例，然后在他的基础上，经过一番修改，和备注，实现了当前的案例：

canvas画布的高斯模糊效果

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

let img = new Image();

//这里直接修改图片的路径

img.src = "636753681750720000/Block/preview.jpg";

img.onload = function () {

//设置canvas的宽高

canvas.height = img.height;

canvas.width = img.width;

//将图像绘制到canvas上面

ctx.drawImage(img, 0, 0, img.width, img.height);

//从画布获取一半图像

var data = ctx.getImageData(0, 0, img.width/2, img.height);

//将图像数据进行高斯模糊 data.data是一个数组，每四个值代表一个像素点的rgba的值，data.width data.height 分别代表图像数据的宽高

var emptyData = gaussBlur(data);