feature：更换新壁纸的裁剪方法

pages/components/image-cropper/image-cropper.json

@@ -0,0 +1,3 @@
+{
+	"component": true
+}

pages/components/image-cropper/image-cropper.wxml

@@ -0,0 +1,24 @@
+<view class='image-cropper' catchtouchmove='_preventTouchMove'>
+    <view class='main' bindtouchend="_cutTouchEnd" bindtouchstart="_cutTouchStart" bindtouchmove="_cutTouchMove" bindtap="_click">
+        <view class='content'>
+            <view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
+            <view class='content_middle' style="height:{{height}}px;">
+                <view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
+                <view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
+                    <view class="border border-top-left"></view>
+                    <view class="border border-top-right"></view>
+                    <view class="border border-right-top"></view>
+                    <view class="border border-right-bottom"></view>
+                    <view class="border border-bottom-right"></view>
+                    <view class="border border-bottom-left"></view>
+                    <view class="border border-left-bottom"></view>
+                    <view class="border border-left-top"></view>
+                </view>
+                <view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
+            </view>
+            <view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
+        </view>
+        <image bindload="imageLoad" bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end" style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};transform:translate3d({{_img_left-img_width/2}}px,{{_img_top-img_height/2}}px,0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.4:0}}s;" class='img' src='{{imgSrc}}'></image>
+    </view>
+    <canvas canvas-id='image-cropper' disable-scroll="true" style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px" class='image-cropper-canvas'></canvas>
+</view>

pages/components/image-cropper/image-cropper.wxss

@@ -0,0 +1,143 @@
+.image-cropper {
+    background: rgba(14, 13, 13, .8);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+.image-cropper .main {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.image-cropper .content {
+    z-index: 9;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+}
+
+.image-cropper .bg_black {
+    background: rgba(0, 0, 0, 0.8) !important;
+}
+
+.image-cropper .bg_gray {
+    background: rgba(0, 0, 0, 0.45);
+    transition-duration: .35s;
+}
+
+.image-cropper .content>.content_top {
+    pointer-events: none;
+}
+
+.image-cropper .content>.content_middle {
+    display: flex;
+    height: 200px;
+    width: 100%;
+}
+
+.image-cropper .content_middle_middle {
+    width: 200px;
+    box-sizing: border-box;
+    position: relative;
+    transition-duration: .3s;
+}
+
+.image-cropper .content_middle_right {
+    flex: auto;
+}
+
+.image-cropper .content>.content_bottom {
+    flex: auto;
+}
+
+.image-cropper .img {
+    z-index: 2;
+    top: 0;
+    left: 0;
+    position: absolute;
+    border: none;
+    width: 100%;
+    backface-visibility: hidden;
+    transform-origin: center;
+}
+
+.image-cropper .image-cropper-canvas {
+    position: fixed;
+    background: white;
+    width: 150px;
+    height: 150px;
+    z-index: 10;
+    top: -200%;
+    pointer-events: none;
+}
+
+.image-cropper .border {
+    background: white;
+    pointer-events: auto;
+    position: absolute;
+}
+
+.image-cropper .border-top-left {
+    left: -2.5px;
+    top: -2.5px;
+    height: 2.5px;
+    width: 33rpx;
+}
+
+.image-cropper .border-top-right {
+    right: -2.5px;
+    top: -2.5px;
+    height: 2.5px;
+    width: 33rpx;
+}
+
+.image-cropper .border-right-top {
+    top: -1px;
+    width: 2.5px;
+    height: 30rpx;
+    right: -2.5px;
+}
+
+.image-cropper .border-right-bottom {
+    width: 2.5px;
+    height: 30rpx;
+    right: -2.5px;
+    bottom: -1px;
+}
+
+.image-cropper .border-bottom-left {
+    height: 2.5px;
+    width: 33rpx;
+    bottom: -2.5px;
+    left: -2.5px;
+}
+
+.image-cropper .border-bottom-right {
+    height: 2.5px;
+    width: 33rpx;
+    bottom: -2.5px;
+    right: -2.5px;
+}
+
+.image-cropper .border-left-top {
+    top: -1px;
+    width: 2.5px;
+    height: 30rpx;
+    left: -2.5px;
+}
+
+.image-cropper .border-left-bottom {
+    width: 2.5px;
+    height: 30rpx;
+    left: -2.5px;
+    bottom: -1px;
+}

pages/piano/wallpaper/wallpaper.js

@@ -2,12 +2,8 @@
 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 route_util from '../../../utils/route_util';
 
 // import EventManager from '../../utils/event_bus'
 
@@ -53,14 +49,8 @@ Page({
         }
       }
     },
-    src: '',
-    showProgress: false,
-    showCropImg: true,
-    width: 250,//宽度
-    height: 250,//高度
-    _imageBuffer: null,
-    progressPercent: 0,
-    _timer: null,
+    showCropImg: false,
+
 
   },
   closePage() {
@@ -68,6 +58,8 @@ Page({
 
   },
   footerTap() {
+    route_util.jump("../cropper/cropper")
+    return;
     const that = this;
 
     wx.chooseMedia({
@@ -76,125 +68,37 @@ Page({
       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
+        // console.log(res.tempFiles[0].tempFilePath)
+        // console.log(res.tempFiles[0].size)
+        //重置图片角度、缩放、位置
+
+
+        // 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.setData({
+        //           showCropImg: true,
+        //           topImg: { "pic": res.tempFilePath }
+        //         })
+        //         that.convertImageToRGB565(res.tempFilePath)
+
+        //       },
+
+        //     })
+        //   }
         // })
 
-        // 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.setData({
-                  showCropImg: true,
-                  topImg: { "pic": res.tempFilePath }
-                })
-                that.convertImageToRGB565(res.tempFilePath)
-
-              },
-
-            })
-          }
-        })
-
       }
     })
 
   },
 
-  // 将图片转换为 RGB565
-  convertImageToRGB565(imagePath) {
-    const ctx = wx.createCanvasContext('imageCanvas');
-    // const ctx = Canvas.getContext('imageCanvas');
-    let _this = this;
-    let width = 533;
-    let height = 533;
-    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
@@ -230,71 +134,12 @@ Page({
     }
 
     this.setData({
-      imageSrc: "",//要裁剪的图片
-      showCrop: false
+      showCropImg: true,
+      topImg: { "pic": img.path }
     })
 
   },
-  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);
-  },
   /**
    * 生命周期函数--监听页面加载
    */
@@ -303,25 +148,7 @@ Page({
     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)
+
 
   },
 
@@ -350,7 +177,6 @@ Page({
    * 生命周期函数--监听页面卸载
    */
   onUnload() {
-    EventManager.removeNotification(CmdEvent.eventName, this);
   },
 
   /**

pages/piano/wallpaper/wallpaper.json

@@ -1,6 +1,5 @@
 {
   "usingComponents": {
-    "nav-bar": "./../../components/navbar/navbar",
-    "image-cropper": "./../../components/imageCrop/index"
+    "nav-bar": "./../../components/navbar/navbar"
   }
 }

pages/piano/wallpaper/wallpaper.wxml

@@ -2,9 +2,9 @@
 <view class="container">
     <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{navbarData}}'></nav-bar>
     <view class="img_section">
-        <image wx:if="{{!showCropImg}}" src="{{topImg.pic}}" class="select_img"></image>
-        <canvas wx:if="{{showCropImg}}" class="canvas_img" canvas-id="imageCanvas"></canvas>
-        <image src="../../../images/common/icon_sel.png" class="select_icon"></image>
+        <image  src="{{topImg.pic}}" class="select_img"></image>
+        <!-- <canvas wx:if="{{showCropImg}}" class="canvas_img" canvas-id="imageCanvas"></canvas> -->
+        <image  src="../../../images/common/icon_sel.png" class="select_icon"></image>
     </view>
     <view class="grid-container">
         <block wx:for="{{imageList}}" wx:key="index" wx:for-item="item" wx:for-index="index">
@@ -15,14 +15,5 @@
         <image src="../../../images/common/icon_add.png" mode="aspectFill" />
         <view>上传图片</view>
     </view>
-    <!-- <image-cropper wx:if="{{scr}}" imageSrc="{{src}}"></image-cropper> -->
-    <!-- <view wx:if="{{src}}" class='bottom'>
-        <button catchtap='updateImage'>更换照片</button>
-        <button type="primary" bindtap='submit'>确定裁剪</button>
-    </view> -->
-    <!-- <image-cropper bind:close="hideCut" cutRatio="1" wx:if="{{showCrop}}" imageSrc="{{imageSrc}}" /> -->
-    <view wx:if="{{showProgress}}" class="progress-container">
-        <progress class="progress" border-radius="26rpx" stroke-width="52rpx" percent="{{progress}}" activeColor="#6546A3" backgroundColor="rgba(0,0,0,0.4)" stroke-width="26" border-radius="13" />
-        <view class="progress-text">保存壁纸中…{{progressPercent}}%</view>
-    </view>
+
 </view>

pages/piano/wallpaper/wallpaper.wxss

@@ -2,26 +2,24 @@
 
 .img_section {
     margin-top: 32rpx;
-    margin-left: 108rpx;
-    width: 533rpx;
+    margin-left: 170rpx;
+    width: 400rpx;
     position: relative;
     align-items: center;
     justify-content: center;
 }
 
 .select_img {
-    width: 533rpx;
-    height: 533rpx;
+    width: 400rpx;
+    height: 400rpx;
     border-radius: 16rpx;
     background-color: #F2F5F7;
     overflow: hidden;
 }
 
 .canvas_img {
-    margin-top: 32rpx;
-    margin-left: 108rpx;
-    width: 533rpx;
-    height: 533rpx;
+    width: 400rpx;
+    height: 400rpx;
     border-radius: 16rpx;
     background-color: #F2F5F7;
     overflow: hidden;
@@ -82,24 +80,3 @@
     margin-top: -16rpx;
 
 }
-
-.progress-container {
-    position: relative;
-    margin-inline: 56rpx;
-    margin-top: 615rpx;
-}
-
-.progress {
-    width: 100%;
-}
-
-.progress-text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    font-size: 24rpx;
-    z-index: 1;
-    font-weight: 500;
-}