css毛玻璃效果

最新推荐文章于 2024-07-03 15:59:27 发布

六_羽

最新推荐文章于 2024-07-03 15:59:27 发布

阅读量917

点赞数

本文链接：https://blog.csdn.net/qq_26536483/article/details/77967611

版权

方法一（纯CSS）：

代码：

.blur{

filter: url(blur.svg#blur;)//火狐谷歌火狐谷歌火狐

-webkite-filter: blur(12px);//谷歌欧朋
-moz-filter: blur(12px);
-ms-filter: blur(12px);
filter: blur(12px);
fiter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShdow=false);//IE6,9
}
<img src="" class="blur"/>

方法需要注意的是，在安卓移动端的本机浏览器不支持

方法二（canvas）:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<canvas id="canvas1" width="800" height="900"></canvas>
<img id="img1" src="img/lonerider2.jpg" width="0"/>
<div id="btn" style="width: 200px; height: 200px; background: red;" ></div>
<script type="text/javascript" src="js/StackBlur.js" ></script>
<script>

var img1 = document.getElementById(imgID);
img1.onload = function () {
//调用模糊处理
StackBlur.image('img1',"canvas1", 60, true, 800, 800);
}

</script>
</body>
</html>

StackBlur.js代码：

//自己修改部分，canvas大小通过传参设置
// var w = img.naturalWidth;
// var h = img.naturalHeight;

if (typeof(canvas) == 'string') {
var canvas = document.getElementById(canvas);
}
else if (typeof HTMLCanvasElement !== 'undefined' && !canvas instanceof HTMLCanvasElement) {
return;
}

canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.width = w;
canvas.height = h;

var context = canvas.getContext('2d');
context.clearRect(0, 0, w, h);

//context.drawImage(img, 0, 0); 自己修改部分，为了图片适应canvas的大小
context.drawImage(img, 0, 0, w, h);

if (isNaN(radius) || radius < 1) return;

if (blurAlphaChannel)
processCanvasRGBA(canvas, 0, 0, w, h, radius);
else
processCanvasRGB(canvas, 0, 0, w, h, radius);
}

function getImageDataFromCanvas(canvas, top_x, top_y, width, height)
{
if (typeof(canvas) == 'string')
var canvas = document.getElementById(canvas);
else if (typeof HTMLCanvasElement !== 'undefined' && !canvas instanceof HTMLCanvasElement)
return;

var context = canvas.getContext('2d');
var imageData;

try {
try {
imageData = context.getImageData(top_x, top_y, width, height);
} catch(e) {
throw new Error("unable to access local image data: " + e);
return;
}
} catch(e) {
throw new Error("unable to access image data: " + e);
}

return imageData;
}

function processCanvasRGBA(canvas, top_x, top_y, width, height, radius)
{
if (isNaN(radius) || radius < 1) return;
radius |= 0;

var imageData = getImageDataFromCanvas(canvas, top_x, top_y, width, height);

imageData = processImageDataRGBA(imageData, top_x, top_y, width, height, radius);

canvas.getContext('2d').putImageData(imageData, top_x, top_y);
}

function processImageDataRGBA(imageData, top_x, top_y, width, height, radius)
{
var pixels = imageData.data;

var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum,
r_out_sum, g_out_sum, b_out_sum, a_out_sum,
r_in_sum, g_in_sum, b_in_sum, a_in_sum,
pr, pg, pb, pa, rbs;

var div = radius + radius + 1;
var w4 = width << 2;
var widthMinus1 = width - 1;
var heightMinus1 = height - 1;
var radiusPlus1 = radius + 1;
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;

var stackStart = new BlurStack();
var stack = stackStart;
for (i = 1; i < div; i++)
{
stack = stack.next = new BlurStack();
if (i == radiusPlus1) var stackEnd = stack;
}
stack.next = stackStart;
var stackIn = null;
var stackOut = null;

yw = yi = 0;

var mul_sum = mul_table[radius];
var shg_sum = shg_table[radius];

for (y = 0; y < height; y++)
{
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;

r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * (pb = pixels[yi+2]);
a_out_sum = radiusPlus1 * (pa = pixels[yi+3]);

r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
a_sum += sumFactor * pa;

stack = stackStart;

for (i = 0; i < radiusPlus1; i++)
{
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack.a = pa;
stack = stack.next;
}

for (i = 1; i < radiusPlus1; i++)
{
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
r_sum += (stack.r = (pr = pixels[p])) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = (pg = pixels[p+1])) * rbs;
b_sum += (stack.b = (pb = pixels[p+2])) * rbs;
a_sum += (stack.a = (pa = pixels[p+3])) * rbs;

r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
a_in_sum += pa;

stack = stack.next;
}

stackIn = stackStart;
stackOut = stackEnd;
for (x = 0; x < width; x++)
{
pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum;
if (pa != 0)
{
pa = 255 / pa;
pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
} else {
pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
}

r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
a_sum -= a_out_sum;

r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
a_out_sum -= stackIn.a;

p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;

r_in_sum += (stackIn.r = pixels[p]);
g_in_sum += (stackIn.g = pixels[p+1]);
b_in_sum += (stackIn.b = pixels[p+2]);
a_in_sum += (stackIn.a = pixels[p+3]);

r_sum += r_in_sum;
g_sum += g_in_sum;
b_sum += b_in_sum;
a_sum += a_in_sum;

stackIn = stackIn.next;

r_out_sum += (pr = stackOut.r);
g_out_sum += (pg = stackOut.g);
b_out_sum += (pb = stackOut.b);
a_out_sum += (pa = stackOut.a);

r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
a_in_sum -= pa;

stackOut = stackOut.next;

yi += 4;
}
yw += width;
}

for (x = 0; x < width; x++)
{
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;

yi = x << 2;
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * (pb = pixels[yi+2]);
a_out_sum = radiusPlus1 * (pa = pixels[yi+3]);

r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
a_sum += sumFactor * pa;

stack = stackStart;

for (i = 0; i < radiusPlus1; i++)
{
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack.a = pa;
stack = stack.next;
}

yp = width;

for (i = 1; i <= radius; i++)
{
yi = (yp + x) << 2;

r_sum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = (pg = pixels[yi+1])) * rbs;
b_sum += (stack.b = (pb = pixels[yi+2])) * rbs;
a_sum += (stack.a = (pa = pixels[yi+3])) * rbs;

r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
a_in_sum += pa;

stack = stack.next;

if(i < heightMinus1)
{
yp += width;
}
}

yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for (y = 0; y < height; y++)
{
p = yi << 2;
pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum;
if (pa > 0)
{
pa = 255 / pa;
pixels[p] = ((r_sum * mul_sum) >> shg_sum) * pa;
pixels[p+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
pixels[p+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
} else {
pixels[p] = pixels[p+1] = pixels[p+2] = 0;
}

r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
a_sum -= a_out_sum;

r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
a_out_sum -= stackIn.a;

p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width)) << 2;

r_sum += (r_in_sum += (stackIn.r = pixels[p]));
g_sum += (g_in_sum += (stackIn.g = pixels[p+1]));
b_sum += (b_in_sum += (stackIn.b = pixels[p+2]));
a_sum += (a_in_sum += (stackIn.a = pixels[p+3]));

stackIn = stackIn.next;

r_out_sum += (pr = stackOut.r);
g_out_sum += (pg = stackOut.g);
b_out_sum += (pb = stackOut.b);
a_out_sum += (pa = stackOut.a);

r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
a_in_sum -= pa;

stackOut = stackOut.next;

yi += width;
}
}
return imageData;
}

function processCanvasRGB(canvas, top_x, top_y, width, height, radius)
{
if (isNaN(radius) || radius < 1) return;
radius |= 0;

var imageData = getImageDataFromCanvas(canvas, top_x, top_y, width, height);
imageData = processImageDataRGB(imageData, top_x, top_y, width, height, radius);

canvas.getContext('2d').putImageData(imageData, top_x, top_y);
}

function processImageDataRGB(imageData, top_x, top_y, width, height, radius)
{
var pixels = imageData.data;

var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum,
r_out_sum, g_out_sum, b_out_sum,
r_in_sum, g_in_sum, b_in_sum,
pr, pg, pb, rbs;

var div = radius + radius + 1;
var w4 = width << 2;
var widthMinus1 = width - 1;
var heightMinus1 = height - 1;
var radiusPlus1 = radius + 1;
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;

var stackStart = new BlurStack();
var stack = stackStart;
for (i = 1; i < div; i++)
{
stack = stack.next = new BlurStack();
if (i == radiusPlus1) var stackEnd = stack;
}
stack.next = stackStart;
var stackIn = null;
var stackOut = null;

yw = yi = 0;

var mul_sum = mul_table[radius];
var shg_sum = shg_table[radius];

for (y = 0; y < height; y++)
{
r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;

r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * (pb = pixels[yi+2]);

r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;

stack = stackStart;

for (i = 0; i < radiusPlus1; i++)
{
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack = stack.next;
}

for (i = 1; i < radiusPlus1; i++)
{
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
r_sum += (stack.r = (pr = pixels[p])) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = (pg = pixels[p+1])) * rbs;
b_sum += (stack.b = (pb = pixels[p+2])) * rbs;

r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;

stack = stack.next;
}

stackIn = stackStart;
stackOut = stackEnd;
for (x = 0; x < width; x++)
{
pixels[yi] = (r_sum * mul_sum) >> shg_sum;
pixels[yi+1] = (g_sum * mul_sum) >> shg_sum;
pixels[yi+2] = (b_sum * mul_sum) >> shg_sum;

r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;

r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;

p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;

r_in_sum += (stackIn.r = pixels[p]);
g_in_sum += (stackIn.g = pixels[p+1]);
b_in_sum += (stackIn.b = pixels[p+2]);

r_sum += r_in_sum;
g_sum += g_in_sum;
b_sum += b_in_sum;

stackIn = stackIn.next;

r_out_sum += (pr = stackOut.r);
g_out_sum += (pg = stackOut.g);
b_out_sum += (pb = stackOut.b);

r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;

stackOut = stackOut.next;

yi += 4;
}
yw += width;
}

for (x = 0; x < width; x++)
{
g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;

yi = x << 2;
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi+1]);
b_out_sum = radiusPlus1 * (pb = pixels[yi+2]);

r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;

stack = stackStart;

for (i = 0; i < radiusPlus1; i++)
{
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack = stack.next;
}

yp = width;

for (i = 1; i <= radius; i++)
{
yi = (yp + x) << 2;

r_sum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = (pg = pixels[yi+1])) * rbs;
b_sum += (stack.b = (pb = pixels[yi+2])) * rbs;

r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;

stack = stack.next;

if(i < heightMinus1)
{
yp += width;
}
}

yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for (y = 0; y < height; y++)
{
p = yi << 2;
pixels[p] = (r_sum * mul_sum) >> shg_sum;
pixels[p+1] = (g_sum * mul_sum) >> shg_sum;
pixels[p+2] = (b_sum * mul_sum) >> shg_sum;

r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;

r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;

p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width)) << 2;

r_sum += (r_in_sum += (stackIn.r = pixels[p]));
g_sum += (g_in_sum += (stackIn.g = pixels[p+1]));
b_sum += (b_in_sum += (stackIn.b = pixels[p+2]));

stackIn = stackIn.next;

r_out_sum += (pr = stackOut.r);
g_out_sum += (pg = stackOut.g);
b_out_sum += (pb = stackOut.b);

r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;

stackOut = stackOut.next;

yi += width;
}
}

return imageData;
}

function BlurStack()
{
this.r = 0;
this.g = 0;
this.b = 0;
this.a = 0;
this.next = null;
}

module.exports = {
image: processImage,
canvasRGBA: processCanvasRGBA,
canvasRGB: processCanvasRGB,
imageDataRGBA: processImageDataRGBA,
imageDataRGB: processImageDataRGB
};

},{}]},{},[1])(1)
});