兼容Safari/IE的局部高斯模糊实例页面

回到相关文章 »

效果：

参数设置

移动框选范围：

原始图像

模糊大小（0-20）：

输出效果

代码：

CSS代码：
/* 原始尺寸512 * 512 */
canvas,
img {
	width: 256px; height: 256px;	
}
HTML代码：
<h4>参数设置</h4>
<p>移动框选范围：</p>
<div class="container">
    <i id="cover" class="cover"></i>
    <img id="source" src="1.jpg" alt="原始图像">
</div>
<p>模糊大小（0-20）：<input type="range" min="0" max="20" value="10"></p>

<h4>输出效果</h4>
<canvas id="output"></canvas>
JS代码：
<script src="./localBlur.js"></script>
<script>
localBlur(source, 10, [76,40,360,240], output);
</script>