文章目录
前言
WEB前端功能越来越强大了,很多时候需要前端去对图片进行简单的处理,比如我遇到的图片背景模糊然后完成图片叠加,经过一番摸索使用StackBlur.js这个js插件完成了需求
提示:以下是本篇文章正文内容,下面案例可供参考
一、使用StackBlur.js做模糊背景
StackBlur.js主要是对图片进行模糊处理的js插件。
二、使用步骤
1.安装依赖包
Github项目地址:https://github.com/flozz/StackBlur
npm install --save stackblur-canvas
2.创建页面
html代码:
<h1>图像背景模糊处理</h1>
<canvas id="canvas" width="600" height="300"></canvas>
<div>
<label>背景模糊半径</label> <input type="range" min="0" max="50" value="0" id="slider" />
<br><br>
<label>叠加图层透明度</label>
<input type="range" step="0.1" min="0" max="1" value="1" id="alpha" />
<br><br>
<button id="add">合并</button>
<br><br>
<button onclick="exportCanvasAsPNG('canvas','mohu')">保存</button>
</div>
CSS代码:
html, body {
padding: 0;
margin: 0;
text-align: center;
background: #fff;
font-family: Arial, sans-serif;
color: #333;
}
canvas {
border: #fff solid 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
vertical-align: middle;
}
div {
margin: 20px;
}
3.编写js代码
// 引入StackBlur.js
import * as StackBlur from '../src/stackblur.js';
//获取预览的convas对象
const canvas = document.querySelector('#canvas');
const cctx = canvas.getContext('2d');
//创建一个待处理的convas对象
const buff = document.createElement('canvas');
buff.width = canvas.width;
buff.height = canvas.height;
const bctx = buff.getContext('2d');
//加载图片
var img = new Image();
img.src = "imgdemo.png";
img.onload = function() {
bctx.drawImage(img, 0, 0, 600, 300);
console.log("img is loaded")
cctx.drawImage(buff, 0, 0);
};
img.onerror = function() {
console.log("error!")
};
// Slider
const slider = document.querySelector('#slider');
slider.addEventListener('change', function() {
cctx.drawImage(buff, 0, 0);
//调用StackBlur.js实现模糊
StackBlur.canvasRGB(
canvas, 0, 0, canvas.width, canvas.height, slider.value
);
});
//add合并按钮
const button = document.querySelector('#add');
button.addEventListener('click', function() {
var img2 = new Image();
img2.src = "code.jpg";
img2.onload = function() {
//设置透明度
cctx.globalAlpha = document.querySelector('#alpha').value
cctx.drawImage(img2, 100, 0, 150, 150);
};
img2.onerror = function() {
console.log("error!")
};
});
三、效果展示
总结
本案例是对背景模糊的简单实现,仅供参考!