const fs = require('fs')
const path = require('path')
const sizeOf = require('image-size')

const basePath = path.resolve('resources')
const jsonPath = path.resolve('view/src/assets/data/datalist.json')
const picsData = []

fs.readdir(basePath, async function (err, files) {
  //遍历读取到的文件列表
  for (let i = 0; i < files.length; i++) {
    const filename = files[i]
    const filedir = path.join(basePath, filename)
    //根据文件路径获取文件信息，返回一个fs.Stats对象
    const stats = await fs.statSync(filedir)
    if (stats.isFile()) {
      let dimensions = { url: filename, ...sizeOf(filedir) }
      if (dimensions.width) {
        cp(filedir, path.resolve(`view/public/${filename}`)) // 复制图片
        picsData.push({ ...dimensions })
      }
    }
  }
  // 解析完毕，生成json
  fs.writeFileSync(jsonPath, JSON.stringify(picsData))
})

// 复制文件
function cp(from, to) {
  fs.writeFileSync(to, fs.readFileSync(from))
}

<template>
    <div id="list">
        <div :style="{ position: 'absolute', width: `${img.w}px`, height: `${img.h}px`, left: `${img.left}px`, top: `${img.top}px` }" v-for="(img, i) in list" :index="i" :key="'img' + i">
          <img ............ />
        </div>
    </div>
</template>

let columnNums = 2 // 有多少列
const gap = 8 // 图片之间的间隔
const columnHeights = [] // 列的高度

function waterfall(data) { // data为图片数组
  const columnHeights: any = [] // 列的高度
  let { offsetWidth: pW } = document.getElementById('list').parentNode.offsetWidth
  pW -= gap * (columnNums - 1) // 总体宽度数值等于减去间隔
  const newList = JSON.parse(JSON.stringify(data))
  for (let i = 0; i < newList.length; i++) {
    let index = i % columnNums
    const item = newList[i]
    item.w = pW / columnNums // 图片宽度
    item.h = item.height * (pW / columnNums / item.width) // 图片高度
    item.left = index * (pW / columnNums + gap) // 定位
    item.top = columnHeights[index] + gap || 0 // 定位
    columnHeights[index] = isNaN(columnHeights[index]) ? item.h : item.h + columnHeights[index] + gap // 记录列高度
  }
  return newList
}

function waterfall(data) { // data为图片数组
  // ...........
  // columnHeights[index] = isNaN(columnHeights[index]) ? item.h : item.h + columnHeights[index] + gap
  // TODO: 上面这行代码改为找出最短列计算高度
  if (isNaN(columnHeights[index])) {
    columnHeights[index] = item.h
  } else {
    index = columnHeights.indexOf(Math.min(...columnHeights))
    item.left = index * (pW / columnNums + gap)
    item.top = columnHeights[index] + gap || 0
    columnHeights[index] = item.h + columnHeights[index] + gap
  }
}

const gap = 8 // 图片之间的间隔
let limitWidth = document.getElementById('list').parentNode.offsetWidth // 宽度限制，列表父级div宽度
const list = JSON.parse(JSON.stringify(data)) // data为原始图片数组
const newList = await createNewArr(list)

async function createNewArr(list) {
  const standardHeight = 180 // 高度阈值
  const neatArr = [] // 整理后的数组
  function factory(cutArr) {
    return new Promise((resolve) => {
      const lineup = list.shift()
      if (!lineup) {
        resolve({ height: calculate(cutArr), list: cutArr })
        return
      }
      cutArr.push(lineup)
      const finalHeight = calculate(cutArr)
      if (finalHeight > standardHeight) { // 如果计算超出阈值，就继续加入图片
        resolve(factory(cutArr))
      } else {
        resolve({ height: finalHeight, list: cutArr })
      }
    })
  }
  function calculate(cutArr) {
    let cumulate = 0
    for (const iterator of cutArr) {
      cumulate += iterator.width / iterator.height
    }
    return (limitWidth - gap * (cutArr.length - 1)) / cumulate // 实际宽度需要减去图片间隔
  }
  async function handleList() {
    const { list: newList, height } = await factory([list.shift()])
    neatArr.push( newList.map((x) => { x.w = (x.width / x.height) * height; x.h = height; return x }))
    if (list.length > 0) {
      await handleList()
    }
  }
  await handleList()

  return neatArr.flat()
}

const ExifImage = require('exif').ExifImage
new ExifImage({ image: filedir }, async function (error, exifData) {
  if (!error) {
    const { ImageWidth: width, ImageHeight: height, ModifyDate } = exifData.image // 获取到图片一些数据
    let datetime = exifData.exif.DateTimeOriginal || ModifyDate // 元数据
    // TODO: 解析出来的格式不标准，转化成我们可以使用的：
    datetime && (result.datetime = datetime.split(' ')[0].replace(/:/g, '-') + ' ' + datetime.split(' ')[1].slice(0, 8))
    if (JSON.stringify(exifData.gps) === '{}') {
      // 定位属于隐私信息
    }
  }
})

const sizeOf = require('image-size')
const images = require('images')

const filedir = '' // <- 图像地址
const dimensions = sizeOf(filedir)
if ([6, 8, 3].includes(dimensions.orientation)) {
  // TODO：通过解码写入来复制图片，判断方向是否正确。
  images(filedir).save(.......) // 写入到新的地址
}

// filedir: 图像地址，thumbSize: 压缩后图像宽度，quality: 压缩质量
images(filedir).size(thumbSize).save(.....), { quality: 70 })

<template>
  <div class="img">
    <img v-show="!loading" :src="src" @load="loadDone" />
    <div v-if="loading" class="color" :style="{ background: data.color }" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  props: {
    src: {},
    data: {},
  },
  setup(props) {
    const loading = ref(true)
    const loadDone = () => {
      loading.value = false
    }
    watch(() => props.src, () => {
        loading.value = true
    })
    return { loading, loadDone }
  },
})
</script>

<style scoped>
  .img {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .img > img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .color {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    animation: breathe 600ms ease-out infinite alternate;
  }
  /* 呼吸效果 */
  @keyframes breathe {
    0% { opacity: 0.8 }
    100% { opacity: 1 }
  }
</style>

const ColorThief = require('colorthief')

ColorThief.getColor(image, quality).then((color) => {
    rgbToHex(color) // color 为图片主颜色，格式为三原色数组
}).catch((err) => {})

const rgbToHex = (rgb) => '#' + rgb.map((x) => {
  const hex = x.toString(16)
  return hex.length === 1 ? '0' + hex : hex
}).join('')

onMounted(async () => {
  await nextTick()
  observer()
})

function observer() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((item) => {
      if (item.isIntersecting) {
        // TODO: 换上真实的图片链接
        observer.unobserve(item.target) // 停止监听该节点
      }
    })
  }) //不传options参数，默认根元素为浏览器视口
  document.querySelectorAll('.img-box').forEach((div) => observer.observe(div)) // 遍历监听所有图片DOM节点
}

// api.js
import fetch from '@/utils/axios'
// 文档地址：https://binaryify.github.io/NeteaseCloudMusicApi/#/
// 获取歌曲播放链接
export const getUrl = (params: Type.Object = {}) => fetch(MUSIC_URL + '/song/url', params, 'get')
// 通过 id 获取歌单详情
export const getList = (params: Type.Object = {}) => fetch(MUSIC_URL + '/playlist/detail?id=5183094117', params, 'get')

// deferLoader.js 异步加载脚本方法
export default (type, url) => {
  return new Promise((resolve) => {
    const link_element = document.createElement(type)
    if (type === 'script') {
      link_element.setAttribute('src', url)
    } else if (type === 'link') {
      link_element.setAttribute('rel', 'stylesheet')
      link_element.setAttribute('href', url)
    }
    document.head.appendChild(link_element)
    link_element.onload = function () {
      resolve()
    }
  })
}

<template>
  <div id="aplayer"></div>
</template>

<script>
import { defineComponent, onMounted, nextTick } from 'vue'
import * as api from './api'
import loader from '@/utils/widgets/deferLoader'

export default defineComponent({
  setup() {
    onMounted(async () => {
      const ids = []
      const listObj = {}
      const { data: resList } = await api.getList()

      for (const x of resList.playlist.tracks) {
        ids.push(x.id)
        listObj[x.id] = { name: x.name, artist: x.ar[0] ? x.ar[0].name : '', cover: x.al.picUrl }
      }
      let { data: audio } = await api.getUrl({ id: ids + '', realIP: '116.25.146.177' }) // ip是随便填的，不填会无法访问接口
      audio = audio.data.map((x: any) => {
        return Object.assign({ url: x.url }, listObj[x.id])
      })
     // 如果接口请求成功，下面开始启动播放器
     await load() // 下载插件
     await nextTick()
     const APlayer = window.APlayer
        new APlayer({
          container: document.getElementById('aplayer'),
          fixed: true, // 播放器会吸附在底部，没有兼容iphone黑边，所以下面补了临时处理
          autoplay: true,
          audio,
        })
    })
    async function load() {
      await loader('script', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js')
      await loader('link', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css')
    }
  },
})
</script>

<style>
  .aplayer.aplayer-fixed .aplayer-body {
    bottom: calc(constant(safe-area-inset-bottom));
    bottom: calc(env(safe-area-inset-bottom));
  }
</style>