Kaynağa Gözat

feature:增加壁纸的裁剪画布功能

zeng.chen 7 ay önce
ebeveyn
işleme
385285d0c2

+ 10 - 9
pages/connectBle/connectBle.js

@@ -40,16 +40,17 @@ Page({
     BtHelper.getInstance().startScan(
       that.data.connectDevice,
       async function (b) {
-          if (!b) {
-            that.setStatus(1);
-          }
-        },
-        async function (res) {
-          await BtHelper.getInstance().stopSearch();
-          that.setStatus(2);
-          that.data.connectDevice.deviceId = res.deviceId;
-          that.data.connectDevice.connectable = res.connectable;
+        if (!b) {
+          that.setStatus(1);
         }
+      },
+      async function (res) {
+        await BtHelper.getInstance().stopSearch();
+        that.setStatus(2);
+        that.data.connectDevice.deviceId = res.deviceId;
+        that.data.connectDevice.connectable = res.connectable;
+        that.data.connectDevice.mac = res.mac;
+      }
     );
   },
 

+ 39 - 28
pages/piano/wallpaper/wallpaper.js

@@ -55,6 +55,7 @@ Page({
     },
     src: '',
     showProgress: false,
+    showCropImg: false,
     width: 250,//宽度
     height: 250,//高度
     _imageBuffer: null,
@@ -95,7 +96,7 @@ Page({
               src: res.path,// 图片路径
               cropScale: '1:1', // 裁剪比例
               success(res) {
-                console.log(res)
+                console.log("裁剪后的图片", res)
                 that.convertImageToRGB565(res.tempFilePath)
               }
             })
@@ -110,37 +111,46 @@ Page({
   // 将图片转换为 RGB565
   convertImageToRGB565(imagePath) {
     const ctx = wx.createCanvasContext('imageCanvas');
+    // const ctx = Canvas.getContext('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) => {
+    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);
-            },
-          });
+            }
+
+            // this.saveAsBinFile(rgb565Data, width, height);
+          },
+          fail: (err) => {
+            console.error('获取像素数据失败:', err);
+          },
         });
-      },
-    });
+      });
+    } catch (error) {
+      console.log(error)
+    }
+
   },
 
   // 将 RGBA 数据转换为 RGB565 格式
@@ -265,6 +275,7 @@ Page({
           progress: 0,
           progressPercent: 0,
           showProgress: false,
+          showCropImg: false
         });
         wx.showToast({
           title: '图片上传成功',

+ 2 - 1
pages/piano/wallpaper/wallpaper.wxml

@@ -2,7 +2,8 @@
 <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 wx:if="{{imageList.length>0}}" class="img_section">
-        <image src="{{topImg.pic}}" class="select_img"></image>
+        <image wx:if="{{!showCropImg}}" src="{{topImg.pic}}" class="select_img"></image>
+        <canvas wx:if="{{showCropImg}}" class="select_img" canvas-id="imageCanvas"></canvas>
         <image src="../../../images/common/icon_sel.png" class="select_icon"></image>
     </view>
     <view class="grid-container">