如何将两个图像转换为一个图像并在Javascript中更改颜色？

我正在为一个Youtuber制作一个网站，我正在为他制作一个角色编辑器

我已经完成了编辑器本身，但现在我希望人们能够将其保存为图像。 是链接。 我做了一个贝雷帽和一个面部选择器。贝雷帽是一种背景图像，贝雷帽本身是透明的，可以改变颜色

代码RBB滑块：

var hat=document.getElementById（“编辑器贝雷特”）；
var r=document.querySelector（'#r'）；
var g=document.querySelector（“#g”）；
var b=document.querySelector（“#b”）；
var r#u out=document.querySelector（'r#u out'）；
var g#u out=document.querySelector（'g#u out'）；
var b#u out=document.querySelector（'b#u out'）；
函数setColor（）{
var r_hex=parseInt（r.value，10）.toString（16），
g_hex=parseInt（g.value，10）.toString（16），
b_hex=parseInt（b.value，10）.toString（16），
hex=“#”+pad（r#u hex）+pad（g#u hex）+pad（b#u hex）；
hat.style.backgroundColor=十六进制；
}
功能板（n）{
return（n.length如果您想在Javascript中呈现图像，最好的解决方案是使用画布。您可以导出这些图像，并且可以在画布中轻松组合图像。也许，这个问题将帮助您：

另一个解决方案是在服务器上处理图像。例如，如果您使用PHP，您可以将图像与PHP结合使用。
您应该使用画布来完成此操作。您可以将两个图像呈现到画布上，如下所示：

  var canvasObj = document.getElementById("myCanvas");
  var ctx = canvasObj.getContext("2d");
  var imgBeret = document.getElementById("idOfBeretImage");
  var imgFace = document.getElementById("idOfFace");
  ctx.drawImage(imgBeret, 10, 10); // you will have to position 
  ctx.drawImage(imgFace, 10, 10); // you will have to position 

最好使用透明背景的贝雷帽图像，您可以在贝雷帽内部保持白色，外部保持透明，以便在画布上无缝渲染

有关在画布上绘制的详细信息：

要将画布保存到图像或下载该图像，我们可以使用此库。Canvas2image

使用以下代码，我们可以从画布中获取图像：

Canvas2Image.convertToImage(canvasObj, width, height, type)

有关库的更多信息：
您希望用户下载最终图像还是将其发送到服务器？用户可以下载它，但如何使用贝雷帽内部的白色背景颜色和外部透明的颜色来更改贝雷帽的颜色？您可以使用Photoshop之类的照片编辑器来执行此操作，并制作PNG图像。但如何使其更改为使用RGB滑块e color？我编辑了我的帖子，现在它还显示了RGB滑块代码，以帮助您进行着色：您可以这样做，然后将人脸图像绘制到CanvasHanks以获得答案，但我将使用Sylens的答案。