【快图】新增编辑器支持吸取颜色功能

107 阅读1分钟

使用快图编辑器:

ikuaitu.github.io/vue-fabric-…

补充功能,新增编辑器支持吸取颜色功能

点击对应控制按钮,触发下面函数,TODO 里面需要补充

const handleClickEyeDropper = async () => {
  // 检查浏览器是否支持EyeDropper API
  if (typeof window === 'undefined' || !('EyeDropper' in window)) {
    console.warn('当前浏览器不支持EyeDropper API');
    // 给用户显示友好的提示信息
    alert('您的浏览器不支持取色器功能,请使用Chrome或Edge等现代浏览器');
    return;
  }

  try {
    // 创建EyeDropper实例
    const eyeDropper = new window.EyeDropper();
    // 打开取色器并等待用户选择颜色
    const colorSelectionResult = await eyeDropper.open();

    // 如果用户选择了颜色
    if (colorSelectionResult && colorSelectionResult.sRGBHex) {
       // TODO: 这里对应更新对应颜色值,例如,更新文字字体颜色,或者对应元素框背景颜色
    }
  } catch (err) {
    // 用户取消取色或发生错误
    console.log('取色器错误:', err);
    // 可以在这里添加用户取消操作时的提示
  }
};