|
|
@@ -50,6 +50,25 @@
|
|
|
<view class="body">
|
|
|
<view class="article-header">
|
|
|
<text class="title">{{ queueDetail.title }}</text>
|
|
|
+
|
|
|
+ <!-- 显示第一个像素的颜色 -->
|
|
|
+ <view class="pixel-color" v-if="pixelColor">
|
|
|
+ <view class="color-box"
|
|
|
+ :style="{backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})`}"></view>
|
|
|
+ <view class="color-info">
|
|
|
+ <text class="color-text">左上角像素RGB值:</text>
|
|
|
+ <text class="color-value">R:{{pixelColor.r}} G:{{pixelColor.g}} B:{{pixelColor.b}}</text>
|
|
|
+ <text class="color-hex">HEX: {{rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b)}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 颜色加载中状态 -->
|
|
|
+ <view class="pixel-color loading"
|
|
|
+ v-else-if="home_image && home_image !== '../../static/home/avator.png'">
|
|
|
+ <view class="color-box loading"></view>
|
|
|
+ <!-- <text class="color-text">正在获取像素颜色...</text> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
<view class="meta-info">
|
|
|
<view class="meta-item">
|
|
|
<text class="fa fa-clock-o"></text>
|
|
|
@@ -130,6 +149,10 @@
|
|
|
<!-- 音频元素 -->
|
|
|
<audio id="audioPlayer" :src="queueDetail.result_audio" style="display:none;"></audio>
|
|
|
|
|
|
+ <!-- 用于处理图片像素的隐藏canvas -->
|
|
|
+ <canvas canvas-id="pixelCanvas"
|
|
|
+ style="width: 10px; height: 10px; position: absolute; left: -100px; top: -100px;"></canvas>
|
|
|
+
|
|
|
<!-- 底部漂浮栏 -->
|
|
|
<view class="floating-bar" v-if="queueDetail.status == 9">
|
|
|
<view class="floating-bar-content">
|
|
|
@@ -187,6 +210,7 @@
|
|
|
audioPlayer: null,
|
|
|
showNotePopup: false,
|
|
|
noteContent: '',
|
|
|
+ pixelColor: null, // 存储像素颜色值
|
|
|
|
|
|
// 队列详情数据
|
|
|
queueDetail: {
|
|
|
@@ -222,7 +246,7 @@
|
|
|
},
|
|
|
onLoad(parms) {
|
|
|
let self = this;
|
|
|
- this.arcID = parms.id || 3;
|
|
|
+ this.arcID = parms.id || 9;
|
|
|
this.getMyInfo();
|
|
|
},
|
|
|
onShow() {
|
|
|
@@ -243,6 +267,77 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 获取图片第一个像素的RGB值
|
|
|
+ getImagePixelColor() {
|
|
|
+ console.log("图片加载完成，准备获取像素颜色");
|
|
|
+
|
|
|
+ // 清空之前的颜色值，进入加载状态
|
|
|
+ this.pixelColor = null;
|
|
|
+
|
|
|
+ // 如果是默认图片或空图片，则直接返回
|
|
|
+ if (!this.home_image || this.home_image === '../../static/home/avator.png') {
|
|
|
+ console.log("无有效图片，不获取像素颜色");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用uni.getImageInfo获取图片信息
|
|
|
+ uni.getImageInfo({
|
|
|
+ src: this.home_image,
|
|
|
+ success: (res) => {
|
|
|
+ console.log("图片信息:", res);
|
|
|
+
|
|
|
+ // 创建临时canvas绘制上下文
|
|
|
+ const ctx = uni.createCanvasContext('pixelCanvas', this);
|
|
|
+
|
|
|
+ // 修改绘制参数，确保只绘制图片左上角的一小块区域
|
|
|
+ // drawImage(图片路径, 源图片裁剪x, 源图片裁剪y, 源图片裁剪宽度, 源图片裁剪高度, canvas目标x, canvas目标y, canvas目标宽度, canvas目标高度)
|
|
|
+ // 这里我们只从源图片左上角裁剪10x10的区域，绘制到canvas的左上角
|
|
|
+ ctx.drawImage(res.path, 0, 0, 10, 10, 0, 0, 10, 10);
|
|
|
+
|
|
|
+ ctx.draw(false, () => {
|
|
|
+ // 绘制完成后，获取像素数据
|
|
|
+ setTimeout(() => { // 添加短暂延迟确保绘制完成
|
|
|
+ uni.canvasGetImageData({
|
|
|
+ canvasId: 'pixelCanvas',
|
|
|
+ x: 0, // 获取(0,0)位置的像素
|
|
|
+ y: 0,
|
|
|
+ width: 1,
|
|
|
+ height: 1,
|
|
|
+ success: (res) => {
|
|
|
+ // 获取像素RGB值
|
|
|
+ this.pixelColor = {
|
|
|
+ r: res.data[0],
|
|
|
+ g: res.data[1],
|
|
|
+ b: res.data[2],
|
|
|
+ a: res.data[3]
|
|
|
+ };
|
|
|
+ console.log("第一个像素的RGB值:", this
|
|
|
+ .pixelColor);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error("获取像素数据失败:", err);
|
|
|
+ // 显示错误提示
|
|
|
+ uni.showToast({
|
|
|
+ title: '获取颜色失败',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error("获取图片信息失败:", err);
|
|
|
+ // 显示错误提示
|
|
|
+ uni.showToast({
|
|
|
+ title: '图片加载失败',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
// 返回上一页
|
|
|
goBack() {
|
|
|
uni.navigateBack({
|
|
|
@@ -327,7 +422,7 @@
|
|
|
uni.showLoading({
|
|
|
title: '加载中...'
|
|
|
});
|
|
|
-
|
|
|
+ let that = this;
|
|
|
uni.request({
|
|
|
url: this.$apiHost + '/WorkAI/getQueueDetail',
|
|
|
data: {
|
|
|
@@ -349,6 +444,11 @@
|
|
|
if (this.queueDetail.result_images && this.queueDetail.result_images !== "") {
|
|
|
this.image_list = this.queueDetail.result_images.split(",");
|
|
|
this.home_image = this.image_list[0];
|
|
|
+
|
|
|
+ // 当图片更新后，手动触发获取像素颜色（因为图片可能从缓存加载，不会触发@load事件）
|
|
|
+ // setTimeout(() => {
|
|
|
+ // that.getImagePixelColor();
|
|
|
+ // }, 500);
|
|
|
} else {
|
|
|
this.home_image = "../../static/home/avator.png";
|
|
|
}
|
|
|
@@ -671,6 +771,9 @@
|
|
|
console.log('Lyrics Text Height:', lyricsTextHeight);
|
|
|
console.log('Current Offset Y:', this.offsetY);
|
|
|
}
|
|
|
+ },
|
|
|
+ rgbToHex(r, g, b) {
|
|
|
+ return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
|
}
|
|
|
}
|
|
|
}
|
