使用快图编辑器:
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);
// 可以在这里添加用户取消操作时的提示
}
};