123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359 |
- // 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,
- 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');
- let _this = this;
- wx.getImageInfo({
- src: imagePath,
- success: (info) => {
- const { width, height } = info;
- // 设置 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) => {
- const rgb565Data = _this.RGBAtoRGB565(res.data);
- _this.data.imageBuffer = rgb565Data;
- // this.saveAsBinFile(rgb565Data, width, height);
- },
- fail: (err) => {
- console.error('获取像素数据失败:', err);
- },
- });
- });
- },
- });
- },
- // 将 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,
- });
- 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() {
- }
- })
|