wallpaper.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. // pages/piano/wallpaper/wallpaper.js
  2. const { deviceWallPaper } = require('../../../request/deviceListRequest')
  3. // const sharp = require('sharp');
  4. // const fs = require('fs');
  5. const {
  6. BtHelper
  7. } = require('../../../devices/bt_helper');
  8. const { BtCmd } = require('../../../devices/bluetooth/bt_cmd');
  9. import EventManager from '../../../utils/event_bus'
  10. import { EnumCmdEvent, CmdEvent } from '../../../devices/cmd_key_event';
  11. // import EventManager from '../../utils/event_bus'
  12. Page({
  13. /**
  14. * 页面的初始数据
  15. */
  16. data: {
  17. topImg:
  18. {
  19. // pic: "",
  20. // id: "",
  21. // name: ""
  22. },
  23. imageList: [
  24. ],
  25. selectIndex: 0,
  26. navbarData: {
  27. showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
  28. title: '壁纸设置', //导航栏 中间的标题
  29. callback() {
  30. if (this._imageBuffer) {
  31. wx.showModal({
  32. title: '保存图片中,确定要中断退出吗?',
  33. content: '',
  34. complete: (res) => {
  35. if (res.cancel) {
  36. }
  37. if (res.confirm) {
  38. this.endImage(2)
  39. }
  40. }
  41. })
  42. } else {
  43. wx.navigateBack({
  44. delta: 1,
  45. })
  46. }
  47. }
  48. },
  49. src: '',
  50. showProgress: false,
  51. width: 250,//宽度
  52. height: 250,//高度
  53. _imageBuffer: null,
  54. progressPercent: 0,
  55. _timer: null,
  56. },
  57. closePage() {
  58. },
  59. footerTap() {
  60. const that = this;
  61. wx.chooseMedia({
  62. count: 1,
  63. mediaType: ['image'],
  64. sourceType: ['album'],
  65. // camera: 'back',
  66. success(res) {
  67. console.log(res.tempFiles[0].tempFilePath)
  68. console.log(res.tempFiles[0].size)
  69. // that.setData({
  70. // imageSrc: res.tempFiles[0].tempFilePath, // 图片路径
  71. // showCrop: true
  72. // })
  73. // wx.editImage({
  74. // src: res.tempFiles[0].tempFilePath, // 图片路径
  75. // })
  76. wx.getImageInfo({
  77. src: res.tempFiles[0].tempFilePath,
  78. success(res) {
  79. console.log(res)
  80. wx.cropImage({
  81. src: res.path,// 图片路径
  82. cropScale: '1:1', // 裁剪比例
  83. success(res) {
  84. console.log(res)
  85. that.convertImageToRGB565(res.tempFilePath)
  86. }
  87. })
  88. }
  89. })
  90. }
  91. })
  92. },
  93. // 将图片转换为 RGB565
  94. convertImageToRGB565(imagePath) {
  95. const ctx = wx.createCanvasContext('imageCanvas');
  96. let _this = this;
  97. wx.getImageInfo({
  98. src: imagePath,
  99. success: (info) => {
  100. const { width, height } = info;
  101. // 设置 Canvas 尺寸
  102. _this.setData({ canvasWidth: width, canvasHeight: height });
  103. // 在 Canvas 中绘制图片
  104. ctx.drawImage(imagePath, 0, 0, width, height);
  105. ctx.draw(false, () => {
  106. // 获取图片像素数据
  107. wx.canvasGetImageData({
  108. canvasId: 'imageCanvas',
  109. x: 0,
  110. y: 0,
  111. width,
  112. height,
  113. success: (res) => {
  114. const rgb565Data = _this.RGBAtoRGB565(res.data);
  115. _this.data.imageBuffer = rgb565Data;
  116. // this.saveAsBinFile(rgb565Data, width, height);
  117. },
  118. fail: (err) => {
  119. console.error('获取像素数据失败:', err);
  120. },
  121. });
  122. });
  123. },
  124. });
  125. },
  126. // 将 RGBA 数据转换为 RGB565 格式
  127. RGBAtoRGB565(data) {
  128. const rgb565Array = new Uint16Array(data.length / 4);
  129. for (let i = 0; i < data.length; i += 4) {
  130. const r = data[i];
  131. const g = data[i + 1];
  132. const b = data[i + 2];
  133. // 转换为 RGB565
  134. const rgb565 = ((r >> 3) << 11) | ((g >> 2) << 5) | (b >> 3);
  135. rgb565Array[i / 4] = rgb565;
  136. }
  137. return rgb565Array;
  138. },
  139. // 保存为 .bin 文件
  140. saveAsBinFile(data, width, height) {
  141. const arrayBuffer = data.buffer;
  142. wx.getFileSystemManager().writeFile({
  143. filePath: `${wx.env.USER_DATA_PATH}/image_rgb565_${width}x${height}.bin`,
  144. data: arrayBuffer,
  145. encoding: 'binary',
  146. success: () => {
  147. wx.showToast({
  148. title: '保存成功',
  149. icon: 'success',
  150. });
  151. },
  152. fail: (err) => {
  153. console.error('文件保存失败:', err);
  154. },
  155. });
  156. },
  157. imageTap(e) {
  158. // console.log(e)
  159. // wxfile://tmp_d3e57489ead39c698676ff860df9cb8a37f66ee1a4777dbb.jpg
  160. let image = e.currentTarget.dataset.image;
  161. _this.setData({
  162. topImg: image ?? {}
  163. })
  164. }, wallpaperList() {
  165. let _this = this;
  166. deviceWallPaper().then(res => {
  167. console.log("壁纸列表", res);
  168. let data = res.data ?? []
  169. if (data.length == 0) {
  170. _this.setData({
  171. imageList: [],
  172. topImg: {},
  173. })
  174. return;
  175. }
  176. topImg = data[0];
  177. _this.setData({
  178. imageList: data ?? [],
  179. topImg: data[0] ?? {}
  180. })
  181. })
  182. },
  183. hideCut(e) {
  184. const img = arguments[0].detail
  185. if (img && img.path) {
  186. console.log("裁剪图片:", img)
  187. }
  188. this.setData({
  189. imageSrc: "",//要裁剪的图片
  190. showCrop: false
  191. })
  192. },
  193. startImage() {
  194. BtHelper.sendData(BtCmd.wallPaper(1));
  195. },
  196. sendImage(imageBuffer) {
  197. if (imageBuffer == null) {
  198. wx.showToast({
  199. title: '图片裁剪失败',
  200. icon: 'none'
  201. })
  202. _this.endImage(2)
  203. return;
  204. }
  205. let chunkSize = 20;
  206. let _this = this
  207. _this.setData({
  208. progress: 0,
  209. progressPercent: 0
  210. });
  211. for (let i = 0; i < imageBuffer.length; i += chunkSize) {
  212. const chunk = imageBuffer.slice(i, i + chunkSize);
  213. BtHelper.wallPaperData(chunk)
  214. if (i >= chunkSize) {
  215. _this.endImage(0)
  216. }
  217. }
  218. },
  219. endImage(value) {
  220. BtHelper.sendData(BtCmd.wallPaper(value));
  221. },
  222. startProgress() {
  223. let _this = this;
  224. this.setData({
  225. showProgress: true
  226. })
  227. // 定时器,每100毫秒执行一次
  228. let progress = 0;
  229. _this._timer = setInterval(function () {
  230. if (progress >= 100) {
  231. clearInterval(_this._timer); // 停止定时器
  232. _this.setData({
  233. progress: 0,
  234. progressPercent: 0,
  235. showProgress: false,
  236. });
  237. wx.showToast({
  238. title: '图片上传成功',
  239. })
  240. } else {
  241. progress += 1; // 每次增加1%
  242. _this.setData({
  243. progress: progress,
  244. progressPercent: progress
  245. });
  246. }
  247. }, 100);
  248. },
  249. /**
  250. * 生命周期函数--监听页面加载
  251. */
  252. onLoad(options) {
  253. let param = JSON.parse(options.param)
  254. console.log(param)
  255. this.wallpaperList();
  256. let _this = this;
  257. EventManager.addNotification(CmdEvent.eventName, function (event) {
  258. let name = event.cmdEvent;
  259. console.log("壁纸页:", event)
  260. switch (name) {
  261. case EnumCmdEvent.wallPaper:
  262. let otaCmd = event.wallPaper;
  263. let kind = event.kind;
  264. if (otaCmd === 1 && kind == 1) {
  265. // 开始发送
  266. _this.sendImage(_this.data.imageBuffer)
  267. _this.startProgress()
  268. } else if (otaCmd === 0 && kind == 1) {
  269. // 发送结束
  270. _this.endEnd()
  271. }
  272. break;
  273. }
  274. }, this)
  275. },
  276. /**
  277. * 生命周期函数--监听页面初次渲染完成
  278. */
  279. onReady() {
  280. },
  281. /**
  282. * 生命周期函数--监听页面显示
  283. */
  284. onShow() {
  285. },
  286. /**
  287. * 生命周期函数--监听页面隐藏
  288. */
  289. onHide() {
  290. },
  291. /**
  292. * 生命周期函数--监听页面卸载
  293. */
  294. onUnload() {
  295. EventManager.removeNotification(CmdEvent.eventName, this);
  296. },
  297. /**
  298. * 页面相关事件处理函数--监听用户下拉动作
  299. */
  300. onPullDownRefresh() {
  301. },
  302. /**
  303. * 页面上拉触底事件的处理函数
  304. */
  305. onReachBottom() {
  306. },
  307. /**
  308. * 用户点击右上角分享
  309. */
  310. onShareAppMessage() {
  311. }
  312. })