更新记录

1.0.0（2025-11-19）

初版

平台兼容性

uni-app x(4.75)

ImageColorPicker 组件使用说明

组件简介

f-image-color-picker 一个图片颜色拾取器组件,用户可以通过触摸图片上的任意位置来获取该点的颜色信息。

功能特性

• ✅ 支持动态加载图片
• ✅ 图片自动等比缩放并居中显示
• ✅ 触摸取色,实时获取颜色值
• ✅ 支持自定义画布尺寸
• ✅ 自动适配设备像素比(DPR)
• ✅ 返回 RGB、RGBA 和 HEX 格式颜色值

安装使用

从插件市场下载,然后在页面中引入使用。

<template>
  <view>
    <f-image-color-picker
      :image="imagePath"
      width="750rpx"
      height="750rpx"
      @change="onColorChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      imagePath: '/static/example.jpg'
    }
  },
  methods: {
    onColorChange(colorInfo : UTSJSONObject) {
      console.log('选中的颜色:', colorInfo)
      // colorInfo: { r, g, b, a, hex }
    }
  }
}
</script>

Props 属性

Events 事件

@change

触摸画布时触发,返回当前触摸点的颜色信息。

回调参数:

{
  r: 255,        // 红色通道值 (0-255)
  g: 128,        // 绿色通道值 (0-255)
  b: 64,         // 蓝色通道值 (0-255)
  a: 255,        // 透明度通道值 (0-255)
  hex: '#ff8040' // 十六进制颜色值
}

完整示例

<template>
  <view class="container">
    <view class="picker-wrapper">
      <f-image-color-picker
        :image="currentImage"
        width="690rpx"
        height="690rpx"
        bgColor="#ffffff"
        :customStyle="{ borderRadius: '20rpx' }"
        @change="handleColorChange"
      />
    </view>

    <view class="color-info">
      <view class="color-preview" :style="{ background: selectedColor }"></view>
      <view class="color-text">
        <text>HEX: {{ selectedColor }}</text>
        <text>RGB: {{ rgbText }}</text>
      </view>
    </view>

    <button @click="selectImage">选择图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentImage: '',
      selectedColor: '#ffffff',
      rgbText: 'RGB(255, 255, 255)'
    }
  },
  methods: {
    handleColorChange(colorInfo : UTSJSONObject) {
      this.selectedColor = colorInfo.hex
      this.rgbText = `RGB(${colorInfo.r}, ${colorInfo.g}, ${colorInfo.b})`
    },

    selectImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.currentImage = res.tempFilePaths[0]
        }
      })
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
}

.picker-wrapper {
  margin-bottom: 40rpx;
}

.color-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
}

.color-preview {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 30rpx;
  border: 2rpx solid #ddd;
}

.color-text text {
  display: block;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
</style>