使用StackBlur.js做图片背景模糊

文章目录

• 目录

  前言

  一、使用StackBlur.js做模糊背景

  二、使用步骤

  1.安装依赖包

  2.创建页面

  3.编写js代码

  总结

  ---

---

前言

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!")
  };

});

三、效果展示

---

总结

本案例是对背景模糊的简单实现，仅供参考！