利用 JS 进行图片处理并生成对应粒子图

平时需要实现几个的动效来改善无聊的中后台业务带来的负面情绪。

概述：利用 JS 以及 Three.js 对下图进行处理

来生成对应的粒子图，实例代码。

主要分为以下几个步骤

1. 获取对应图像信息

首先读取图片，可以利用 document.images 获取页面中 img 的信息。

再将 img 绘制到 canvas 画布，利用 getImageData 获取图像的像素信息，具体如下 getImgData

const getImgData = img => {
    // 宽、高
    const { width, height } = img
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    // 像素数
    const numPixels = width * height

    canvas.width = width
    canvas.height = height
    ctx.scale(1, -1)
    ctx.drawImage(img, 0, 0, width, height * -1)
    // 用来描述ca