当前位置: 首页 > 工具软件 > StackBlur.js > 使用案例 >

CANVAS实现图片模糊(处理库StackBlur.js)

东门宜
2023-12-01

之前解决一些浏览器不支持CSS滤镜模糊图片,用的方法是SVG模糊滤镜,但用SVG模糊滤镜,图片大小不好控制,每次都是边测试边调整宽高

正好现在做的一个页面的要求是,一张图片,根据访问者来显示其状态,没有与此条动态交互的用户看到的图片是模糊的,点赞或评论后才可以见到不模糊的图片,所以就用到CANVAS绘制图片叠在图片上,控制其显示与隐藏即可

CANVAS模糊用到了处理库StackBlur.js

这个库提供了3个函数:

stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );    //用于将图片模糊绘制到canvas

stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius );  //用于对Canvas矩形区域执行RGBA模糊

stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius );     //用于对Canvas矩形区域执行RGB模糊,不考虑Alpha值


stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel )
sourceImageID表示要模糊的图片的id;
targetCanvasID表示要显示模糊图片的canvas元素的id;
radius表示模糊的半径大小。不过,根据我的对比测试,radius好像与CSS中filter滤镜的模糊值不是1:1匹配的,反倒是有些类似2:1. 也就是这里的20px的半径模糊近似于CSS中blur滤镜值设置为10px;
blurAlphaChannel为布尔属性,表示aplha透明通道是否要模糊,true表示要模糊。


改了下处理库
var img = document.getElementById( imageID );
var w = img.naturalWidth;
var h = img.naturalHeight;
var canvas = document.getElementById( canvasID );
以下是改的部分
//canvas.style.width  = w + "px";
//canvas.style.height = h + "px";
//显示图片缩放情况下,使CANVAS与图片显示的一样大
canvas.style.width  = img.width + 'px';
canvas.style.height = img.height + 'px';


解决getImageData跨域问题:
此库中用到的getImageData函数
这个函数包含着js跨域的问题。js跨域限制是不能获取非同一域名下的数据的,(本地的位置是没有域名的,url是非同一域名的),所以浏览器都认为你是跨域了,会报错。

解决办法:

本地位置的访问地址用:localhost

url是非同一域名的,借助后端技术:
<?php
$pic = 'http://avatar.csdn.net/D/5/3/1_qq_16494241.jpg';
$arr = getimagesize($pic);
$pic = "data:{$arr['mime']};base64," . base64_encode(file_get_contents($pic));
?>
<img src="<?php echo $pic ?>" /> 


在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为naturalWidth 和naturalHeight属性,例子如下:

var rw = myimage.naturalWidth;// 真实图片宽度 
var rh = myimage.naturalHeight; //真是图片高度 

但有个前提是,必须在图片完全下载到客户端浏览器才能判断,目前在ie 9,Firefox, Chrome, Safari 和Opera都是可以使用的,如果是不支持的版本浏览器,那可以用传统方法判断,如下:

var myimage = document.getElementById("myimage"); 
if (typeof myimage.naturalWidth == "undefined") { 
// IE 6/7/8 
var i = new Image(); 
i.src = myimage.src; 
var rw = i.width; 
var rh = i.height; 

} else { 
// HTML5 browsers 
var rw = myimage.naturalWidth; 
var rh = myimage.naturalHeight; 



 类似资料: