Javascript 如何选择颜色，将其填充到使用fabric.js上传到画布中的选定图像中？

我有这个项目，其中一个要求将是定制和设计在画布上传的图像 . 因此，通过自定义，我将上传一个图像，选择它，然后我想用所选的颜色更改或着色。但我不知道怎么做

var canvas=newfabric.canvas（'canvas'）；
var clearEl=document.getElementById（'clear'）；
var reset=document.getElementById（'reset'）；
clearEl.onclick=函数（）
{
canvas.clear（）
};
reset.onclick=函数（）{
window.location.reload（）；
};
document.getElementById（'file'）.addEventListener（“更改”，函数（e）{
var file=e.target.files[0]；
var reader=new FileReader（）；
控制台日志（“读卡器”+读卡器）；
reader.onload=函数（f）{
var数据=f.target.result；
fabric.Image.fromURL（数据、函数（img））{
var oImg=img.set（{左：70，上：100，宽：250，高：200，角：0}）。比例（0.9）；
canvas.add（oImg.renderAll（）；
canvas.setActiveObject（oImg）；
});
};
reader.readAsDataURL（文件）；
});
$（'#fill'）。更改（函数（）{
var obj=canvas.getActiveObject（）；
如果（obj）{
obj.setFill（$（this.val（））；
}
canvas.renderAll（）；
});
$（'#font'）。更改（函数（）{
var obj=canvas.getActiveObject（）；
如果（obj）{
obj.setFontFamily（$（this.val（））；
}
canvas.renderAll（）；
});
函数addText（）{
var oText=new fabric.IText（'点击并键入'{
左:100,，
前100名，
});
canvas.add（oText）；
setActiveObject（oText）；
$（'fill，'font'）。触发器（'change'）；
oText.bringToFront（）；
}
document.querySelector（'#txt'）.onclick=function（e）{
e、 预防默认值（）；
canvas.deactivateAll（）.renderAll（）；
document.querySelector（'#preview'）.src=canvas.toDataURL（）；
};
$（“#saveImg”）。单击（函数（）{
$（“#canvas”）.get（0）.toBlob（函数（blob）{
saveAs（blob，uuidv4（））；
});
});
画布{
边框：1px纯黑；
}

色调：
arial
塔荷马
新罗马时代
添加自定义文本






以下代码提供了您试图实现的功能的基本演示：


var canvas=newfabric.canvas（'canvas'）；
var clearEl=document.getElementById（'clear'）；
var reset=document.getElementById（'reset'）；
clearEl.onclick=函数（）
{
canvas.clear（）；
};
reset.onclick=函数（）{
window.location.reload（）；
};
document.getElementById（'file'）.addEventListener（“更改”，函数（e）{
var file=e.target.files[0]；
var reader=new FileReader（）；
控制台日志（“读卡器”+读卡器）；
reader.onload=函数（f）{
var数据=f.target.result；
fabric.Image.fromURL（数据、函数（img））{
var oImg=img.set（{左：70，上：100，宽：250，高：200，角：0}）。比例（0.9）；
canvas.add（oImg.renderAll（）；
canvas.setActiveObject（oImg）；
});
};
reader.readAsDataURL（文件）；
});
$（'#fill'）。更改（函数（）{
var obj=canvas.getActiveObject（）；
如果（obj）{
obj.setFill（$（this.val（））；
}
canvas.renderAll（）；
});
$（'#font'）。更改（函数（）{
var obj=canvas.getActiveObject（）；
如果（obj）{
obj.setFontFamily（$（this.val（））；
}
canvas.renderAll（）；
});
//侦听UI中的更改
$（'#tint'）。更改（函数（）{
//获取所选颜色
var tintHex=$（'#fillimage'）.val（）；
如果（$（this）.is（':checked'）==true）{
ApplyInt（tintHex）；
}否则{
移除（）；
}
});
//应用着色过滤器
函数应用程序（tintHex）{
//获取活动对象
var object=canvas.getActiveObject（）；
如果（！对象）{
控制台。错误（'未选择图像'）；
返回false；
//可以提示用户选择图像，或以编程方式为其选择图像
}
//应用色调。基于以下位置的文档：http://fabricjs.com/docs/fabric.Image.filters.Tint.html#initialize
var tintFilter=new fabric.Image.filters.Tint({
颜色：tintHex，
//不透明度：0.5//也可以传入不透明度值
});
对象。过滤器。推送（过滤器）；
applyFilters（canvas.renderAll.bind（canvas））；
}
//取下着色过滤器
函数removett（）{
//获取活动对象
var object=canvas.getActiveObject（）；
如果（！对象）{
控制台。错误（'未选择图像'）；
返回false；
//可以提示用户选择图像，或以编程方式为其选择图像
}
object.filters=[]；//空筛选器数组
applyFilters（canvas.renderAll.bind（canvas））；
}
函数addText（）{
var oText=new fabric.IText（'点击并键入'{
左:100,，
前100名，
});
canvas.add（oText）；
setActiveObject（oText）；
$（'fill，'font'）。触发器（'change'）；
oText.bringToFront（）；
}
document.querySelector（'#txt'）.onclick=function（e）{
e、 预防默认值（）；
canvas.deactivateAll（）.renderAll（）；
document.querySelector（'#preview'）.src=canvas.toDataURL（）；
};
$（“#saveImg”）。单击（函数（）{
$（“#canvas”）.get（0）.toBlob（函数（blob）{
sa