wxmini/pages/piano/wallpaper/wallpaper.js

// pages/piano/wallpaper/wallpaper.js
const { deviceWallPaper } = require('../../../request/deviceListRequest')
// const sharp = require('sharp');
// const fs = require('fs');
const {
  BtHelper
} = require('../../../devices/bt_helper');
const { BtCmd } = require('../../../devices/bluetooth/bt_cmd');
import EventManager from '../../../utils/event_bus'
import { EnumCmdEvent, CmdEvent } from '../../../devices/cmd_key_event';

// import EventManager from '../../utils/event_bus'


Page({

  /**
   * 页面的初始数据
   */
  data: {
    topImg:
    {
      //      pic: "",
      //      id: "",
      //      name: ""
    },
    imageList: [

    ],
    selectIndex: 0,
    navbarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '壁纸设置', //导航栏 中间的标题
      callback() {
        if (this._imageBuffer) {
          wx.showModal({
            title: '保存图片中，确定要中断退出吗？',
            content: '',
            complete: (res) => {
              if (res.cancel) {

              }

              if (res.confirm) {
                this.endImage(2)
              }
            }
          })
        } else {
          wx.navigateBack({
            delta: 1,
          })
        }
      }
    },
    src: '',
    showProgress: false,
    showCropImg: false,
    width: 250,//宽度
    height: 250,//高度
    _imageBuffer: null,
    progressPercent: 0,
    _timer: null,

  },
  closePage() {


  },
  footerTap() {
    const that = this;

    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album'],
      // camera: 'back',
      success(res) {
        console.log(res.tempFiles[0].tempFilePath)
        console.log(res.tempFiles[0].size)

        // that.setData({
        //   imageSrc: res.tempFiles[0].tempFilePath, // 图片路径
        //   showCrop: true
        // })

        // wx.editImage({
        //   src: res.tempFiles[0].tempFilePath, // 图片路径
        // })

        wx.getImageInfo({
          src: res.tempFiles[0].tempFilePath,
          success(res) {
            console.log(res)
            wx.cropImage({
              src: res.path,// 图片路径
              cropScale: '1:1', // 裁剪比例
              success(res) {
                console.log("裁剪后的图片", res)
                that.convertImageToRGB565(res.tempFilePath)
              }
            })
          }
        })

      }
    })

  },

  // 将图片转换为 RGB565
  convertImageToRGB565(imagePath) {
    const ctx = wx.createCanvasContext('imageCanvas');
    // const ctx = Canvas.getContext('imageCanvas');
    let _this = this;
    let width = 400;
    let height = 400;
    try {
      // 设置 Canvas 尺寸
      // _this.setData({ canvasWidth: width, canvasHeight: height });

      // 在 Canvas 中绘制图片
      ctx.drawImage(imagePath, 0, 0, width, height);
      ctx.draw(false, () => {
        // 获取图片像素数据
        wx.canvasGetImageData({
          canvasId: 'imageCanvas',
          x: 0,
          y: 0,
          width,
          height,
          success: (res) => {
            console.log('获取像素数据成功：', res.data);
            if (res.data) {
              _this.setData({
                showCropImg: true,
                topImg: { "pic": imagePath }
              })
              const rgb565Data = _this.RGBAtoRGB565(res.data);
              _this.data.imageBuffer = rgb565Data;
            }

            // this.saveAsBinFile(rgb565Data, width, height);
          },
          fail: (err) => {
            console.error('获取像素数据失败：', err);
          },
        });
      });
    } catch (error) {
      console.log(error)
    }

  },

  // 将 RGBA 数据转换为 RGB565 格式
  RGBAtoRGB565(data) {
    const rgb565Array = new Uint16Array(data.length / 4);

    for (let i = 0; i < data.length; i += 4) {
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      // 转换为 RGB565
      const rgb565 = ((r >> 3) << 11) | ((g >> 2) << 5) | (b >> 3);
      rgb565Array[i / 4] = rgb565;
    }

    return rgb565Array;
  },

  // 保存为 .bin 文件
  saveAsBinFile(data, width, height) {
    const arrayBuffer = data.buffer;

    wx.getFileSystemManager().writeFile({
      filePath: `${wx.env.USER_DATA_PATH}/image_rgb565_${width}x${height}.bin`,
      data: arrayBuffer,
      encoding: 'binary',
      success: () => {
        wx.showToast({
          title: '保存成功',
          icon: 'success',
        });
      },
      fail: (err) => {
        console.error('文件保存失败：', err);
      },
    });
  },

  imageTap(e) {
    // console.log(e)
    // wxfile://tmp_d3e57489ead39c698676ff860df9cb8a37f66ee1a4777dbb.jpg
    let image = e.currentTarget.dataset.image;
    _this.setData({
      topImg: image ?? {}
    })
  }, wallpaperList() {
    let _this = this;
    deviceWallPaper().then(res => {
      console.log("壁纸列表", res);
      let data = res.data ?? []
      if (data.length == 0) {
        _this.setData({
          imageList: [],
          topImg: {},
        })
        return;
      }
      topImg = data[0];

      _this.setData({
        imageList: data ?? [],
        topImg: data[0] ?? {}
      })

    })
  },
  hideCut(e) {
    const img = arguments[0].detail
    if (img && img.path) {
      console.log("裁剪图片：", img)
    }

    this.setData({
      imageSrc: "",//要裁剪的图片
      showCrop: false
    })

  },
  startImage() {
    BtHelper.sendData(BtCmd.wallPaper(1));
  },
  sendImage(imageBuffer) {
    if (imageBuffer == null) {
      wx.showToast({
        title: '图片裁剪失败',
        icon: 'none'
      })
      _this.endImage(2)
      return;
    }
    let chunkSize = 20;
    let _this = this

    _this.setData({
      progress: 0,
      progressPercent: 0
    });

    for (let i = 0; i < imageBuffer.length; i += chunkSize) {

      const chunk = imageBuffer.slice(i, i + chunkSize);
      BtHelper.wallPaperData(chunk)
      if (i >= chunkSize) {
        _this.endImage(0)
      }
    }
  },
  endImage(value) {
    BtHelper.sendData(BtCmd.wallPaper(value));
  },
  startProgress() {
    let _this = this;
    this.setData({
      showProgress: true
    })
    // 定时器，每100毫秒执行一次
    let progress = 0;
    _this._timer = setInterval(function () {
      if (progress >= 100) {
        clearInterval(_this._timer); // 停止定时器
        _this.setData({
          progress: 0,
          progressPercent: 0,
          showProgress: false,
          showCropImg: false
        });
        wx.showToast({
          title: '图片上传成功',
        })
      } else {
        progress += 1; // 每次增加1%
        _this.setData({
          progress: progress,
          progressPercent: progress
        });
      }
    }, 100);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let param = JSON.parse(options.param)
    console.log(param)
    this.wallpaperList();

    let _this = this;
    EventManager.addNotification(CmdEvent.eventName, function (event) {
      let name = event.cmdEvent;
      console.log("壁纸页：", event)
      switch (name) {
        case EnumCmdEvent.wallPaper:
          let otaCmd = event.wallPaper;
          let kind = event.kind;
          if (otaCmd === 1 && kind == 1) {
            // 开始发送
            _this.sendImage(_this.data.imageBuffer)
            _this.startProgress()
          } else if (otaCmd === 0 && kind == 1) {
            // 发送结束
            _this.endEnd()
          }
          break;
      }
    }, this)

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    EventManager.removeNotification(CmdEvent.eventName, this);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})