canvas 实现图片局部模糊_Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js
Canvas实现毛玻璃效果解决方式1:使用stackblur.js
在Android系统中实现图片的毛玻璃效果比较好用的类库是:Android StackBlur
简单API说明:
API 调用
下面是针对不同的源(图片或者 Canvas 等)进行 StackBlur 的调用。
图像作为源:
StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);
sourceImage:HTMLImageElement或者它的id
targetCanvas:HTMLCanvasElement或者它的id
radius:模糊半径
blurAlphaChannel: 如果你想模糊一个 RGBA 的图像,就将其设置为true(可选,默认 =false)
RGBA Canvas 作为源:
StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);
targetCanvas:HTMLCanvasElement
top_x: 要模糊的矩形的左上角的水平坐标
top_y: 要模糊的矩形的左上角的垂直坐标
width: 要模糊的矩形宽度
height: 要模糊的矩形高度
radius: 模糊半径
RGB Canvas 作为源:
StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);
targetCanvas:HTMLCanvasElement
top_x: 要模糊的矩形的左上角的水平坐标
top_y: 要模糊的矩形的左上角的垂直坐标
width: 要模糊的矩形宽度
height:要模糊的矩形高度
radius: 模糊半径
RGBA ImageData 作为源:
StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);
imageData: canvas 的ImageData
top_x:要模糊的矩形的左上角的水平坐标
top_y: 要模糊的矩形的左上角的垂直坐标
width: 要模糊的矩形宽度
height: 要模糊的矩形高度
radius: 模糊半径
RGB ImageData 作为源:
StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);
imageData: canvas 的ImageData
top_x:要模糊的矩形的左上角的水平坐标
top_y: 要模糊的矩形的左上角的垂直坐标
width: 要模糊的矩形宽度
height: 要模糊的矩形高度
radius: 模糊半径
实例1:
varimg1=document.getElementById('img1');
img1.οnlοad= function() {//调用模糊处理
StackBlur.image('img1','canvas1',100,true);
}
实例2:相对完整点
1.添加引用
2.HTM和js
}
varimg1=document.getElementById('img1');
img1.οnlοad= function() {//调用模糊处理
StackBlur.image('img1','canvas1',100,true);
}//滑动控件
$('#ex1').slider().on('change',function(e) {varnewValue=e.value.newValue;//调用模糊处理
StackBlur.image('img1','canvas1', newValue,true);
});
canvas 实现图片局部模糊_Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js相关推荐
- canvas 实现图片局部模糊_Canvas 在高清屏下绘制图片变模糊的解决方法
前提条件 假设我们要在 canvas 中绘制一张 300 x 90 的图片,并且要保证它在高清屏中不模糊.那么我们首先要准备一张 600 x 180的图片,处理过高清屏的同学应该会有这方面的经验. 问 ...
- canvas 实现图片局部模糊_JavaScript中的图片处理与合成(四)
引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...
- canvas 实现图片局部模糊_HTML5 Canvas图片马赛克模糊动画
本文作者html5tricks,转载请注明出处 经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用 HTML代码如下 Change pixel resolution 32 定义了一 ...
- canvas 实现图片局部模糊_小技巧!H5使用Html2Canvas实现自动截屏(下)
上文写到使用html2Canvas实现截屏.上次留了一个问题,如果当前dom元素对象比较大,比如包含一个比较大的图片等,在将dom序列化成字符串时,极易导致字符串超长.对于超长的内容,后台程序将获取不 ...
- 使用canvas给图片增加滤镜
类似操作像素的博主还写过一篇文章:原生JavaScript + Canvas实现图片局部放大器 文章目录 1. 效果图 2. 实现原理 2.1 负片滤镜 2.2 黑白滤镜 2.3 浮雕滤镜 2.4 高 ...
- html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
- svg模糊图片局部清晰透视图
demo下载地址: http://download.csdn.net/download/one_girl/10163426 html代码: <body><div class=&quo ...
- canvas - 绘制图片,图片变模糊问题解决)
问题:canvas绘制图片,图片变模糊 设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px.当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况. 我拿下面一张图片画 ...
- Canvas - 绘制图片模糊问题(canvas 生成图片模糊)
Canvas绘制模糊 文章目录 Canvas绘制模糊 零.问题背景与解决思路 一.涉及到的Api 1.关于window.devicePixelRatio canvas出现模糊的原因 第一块屏幕测试 w ...
最新文章
- SpringBoot整合Spring Security
- 计算机视觉专业术语总结:构建计算机视觉的知识体系
- 存储基础知识一 主要技术DAS、SAN、NAS
- Java03-day03【switch、循环(for、while、do...while)、三种循环的区别、跳转控制语句、Random、循环经典例题】
- xml建模包括以下_为什么要进行建模仿真?
- Centos/Red Hat7/8.x 安装、配置、启动Gitlab14.x (语言和主题配置)
- 【linux】Centos 初始安装后开启网络以及配置静态IP
- 数据导入时遭遇 ORA-01187 ORA-01110
- python中文视频教程-中谷教育python中文视频教程(全38集)
- linux sd卡 测试软件,怎么检测SD卡内存卡是否被扩容过?
- linux火狐快捷键设置,使用火狐浏览器所有的快捷键大全
- 计算机网络之网络安全基础-网络安全协议
- 神经网络与误差反向传播算法
- 聚类分析--k中心点算法
- 一个农村博士的独白:全家为什么只有我读到了博士
- VM定位模块之BLOB分析
- 机器学习(回归二)——线性回归-最小二乘-代码实现
- 基于Tensorflow2 Lite在Android手机上实现时间序列温度预测(二)
- 【LeetCode 3-中等】无重复字符的最长子串(高清截图)
- 输出华氏--摄氏温度转换表