如何将两张图片合成一张图片并在 Javascript 中更改颜色？答案

【问题标题】：How do I make two images into one image and change the color in Javascript?如何将两张图片合成一张图片并在 Javascript 中更改颜色？
【发布时间】：2020-03-13 15:14:21
【问题描述】：

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

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

代码 RBB 滑块：

var hat = document.getElementById("editor-beret");
  var r = document.querySelector('#r');
  var g = document.querySelector('#g');
  var b = document.querySelector('#b');
  var r_out = document.querySelector('#r_out');
  var g_out = document.querySelector('#g_out');
  var b_out = document.querySelector('#b_out');

  function 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_hex) + pad(g_hex) + pad(b_hex);
    hat.style.backgroundColor = hex;
  }

  function pad(n){
    return (n.length<2) ? "0"+n : n;
  }

  r.addEventListener('change', function() {
    setColor();
    r_out.value = r.value;
  }, false);

  r.addEventListener('input', function() {
    setColor();
    r_out.value = r.value;
  }, false);

  g.addEventListener('change', function() {
    setColor();
    g_out.value = g.value;
  }, false);

  g.addEventListener('input', function() {
    setColor();
    g_out.value = g.value;
  }, false);

  b.addEventListener('change', function() {
    setColor();
    b_out.value = b.value;
  }, false);

  b.addEventListener('input', function() {
    setColor();
    b_out.value = b.value;
  }, false);

#editor-beret {
    -webkit-filter: opacity(1) drop-shadow(0 0 0 black);
    filter: opacity(1) drop-shadow(0 0 0 black);
    width: 100px;
    height: 100px;
  }
  fieldset{
    border: none;
  }
  output{
    display: inline-block;
    min-width: 2.5em;
  }
  label, output{
    padding: 2px 9px;
    border-radius: 3px;
    font-family: 'Roboto', sans-serif;
    color: #000;
    font-size: 1.1em;
  }
  label[for=r], output[for=r]{
    background-color: #f00;
  }
  label[for=g], output[for=g]{
    background-color: #0f0;
  }
  label[for=b], output[for=b]{
    background-color: #00f;
  }
  #editor-face {
    width: 100px;
    height: 100px;
  }

<h3>Beret color:</h3>
      <img id="editor-beret" src="hat.png">
      <fieldset>
        <label for="r">R</label>
        <input type="range" min="0" max="255" id="r" step="1" value="0">
        <output for="r" id="r_out">0</output>
      </fieldset>  

      <fieldset>
        <label for="g">G</label>
        <input type="range" min="0" max="255" id="g" step="1" value="0">
        <output for="g" id="g_out">0</output>
      </fieldset>

      <fieldset>
        <label for="b">B</label>
        <input type="range" min="0" max="255" id="b" step="1" value="0">
        <output for="b" id="b_out">0</output>
      </fieldset>

（不要运行代码 sn -p 转到https://beretgang.github.io/red/editor）基于答案：

<script>
  var canvasObj = document.getElementById("myCanvas");
  var ctx = canvasObj.getContext("2d");
  var imgBeret = document.getElementById("editor-beret");
  var imgFace = document.querySelector(".editor-face-selection");
  var imgBeretNew = new Image; img.onload = draw; img.src = "https://beretgang.github.io/red/hat.png";
  var ctx = canvasObj.getContext("2d");
  
  var hat = document.getElementById("editor-beret");
  var r = document.querySelector('#r');
  var g = document.querySelector('#g');
  var b = document.querySelector('#b');
  var r_out = document.querySelector('#r_out');
  var g_out = document.querySelector('#g_out');
  var b_out = document.querySelector('#b_out');
  function 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_hex) + pad(g_hex) + pad(b_hex);
    ctx.fillStyle = hex;
    ctx.fillRect(0, 0, canvasObj.width, canvasObj.height);
    // set composite mode
    ctx.globalCompositeOperation = "destination-in";
    // draw image
    ctx.drawImage(imgBeretNew, 0, 0);
  }
  function pad(n){
    return (n.length<2) ? "0"+n : n;
  }
  r.addEventListener('change', function() {
    setColor();
    r_out.value = r.value;
  }, false);
  r.addEventListener('input', function() {
    setColor();
    r_out.value = r.value;
  }, false);
  g.addEventListener('change', function() {
    setColor();
    g_out.value = g.value;
  }, false);
  g.addEventListener('input', function() {
    setColor();
    g_out.value = g.value;
  }, false);
  b.addEventListener('change', function() {
    setColor();
    b_out.value = b.value;
  }, false);
  b.addEventListener('input', function() {
    setColor();
    b_out.value = b.value;
  }, false);
  
  
  
  function face1(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face1.png";
  }
  function face2(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face2.png";
  }
  function face3(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face3.png";
  }
  function face4(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face4.png";
  }
  function face5(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face5.png";
  }
  function face6(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face6.png";
  }
  function face7(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face7.png";
  }
  function face8(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face8.png";
  }
  function face9(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face9.png";
  }
  function face10(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face10.png";
  }
  function face11(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face11.png";
  }
  function face12(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face12.png";
  }
  function face13(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face13.png";
  }
  function face14(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face14.png";
  }
  function face15(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face15.png";
  }
  function face16(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face16.png";
  }
  function face17(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face17.png";
  }
  function face18(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face18.png";
  }
  function face19(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face19.png";
  }
  function face20(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face20.png";
  }
  function face21(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face21.png";
  }
  function face22(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face22.png";
  }
  function face23(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face23.png";
  }
  function face24(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face24.png";
  }
  function face25(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face25.png";
  }
  function face26(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face26.png";
  }
  function face27(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face27.png";
  }
  function face28(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face28.png";
  }
  function face29(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face29.png";
  }
  function face30(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face30.png";
  }
  function face31(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face31.png";
  }
  function face32(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face32.png";
  }
  function face33(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face33.png";
  }
  function face34(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face34.png";
  }
  function face35(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face35.png";
  }
  function face36(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face36.png";
  }
  function face37(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face37.png";
  }
  function face38(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face38.png";
  }
  function face39(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face39.png";
  }
  function face40(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face40.png";
  }
  function face41(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face41.png";
  }
  function face42(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face42.png";
  }
  function face43(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face43.png";
  }
  function face44(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face44.png";
  }
  function face45(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face45.png";
  }
  function face46(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face46.png";
  }
  function face47(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face47.png";
  }
  function face48(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face48.png";
  }
  function face49(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face49.png";
  }
  function face50(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face50.png";
  }
  function face51(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face51.png";
  }
  function face52(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face52.png";
  }
  function face53(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face53.png";
  }
  function face54(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face54.png";
  }
  function face55(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face55.png";
  }
  function face56(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face56.png";
  }
  function face57(){
    document.querySelector(".editor-face-selection").src="https://beretgang.github.io/red/faces/face57.png";
  }
</script>

<style>
  * {
   font-family: 'Montserrat', sans-serif;
  }
  ::selection {
    color: white;
    background-color: red;
  }
  body {
    background-color: #ededed;
  }
  #nav {
    height: 100px;
    background-color: white;
  }
  #nav h3 {
    color: red;
    float: left;
    margin-top: 35px;
    margin-left: 10px;
  }
  #logo {
    width: 100px;
    height: 100px;
    float: left;
    transition: 0.6s ease;
  }
  #logo:hover {
    filter: grayscale(100%);
  }
  ul {
    list-style-type: none;
    float: right;
    margin-top: 35px;
    margin-right: 25px;
  }
  ul li {
    display: inline-block;
  }
  ul li a {
    text-decoration: none;
    background-color: white;
    color: red;
    padding: 5px 20px;
    border: 1px solid red;
    transition: 0.6s ease;
  }
  ul li a:hover {
    background-color: red;
    color: white;
    text-decoration: none;
  }
  ul li.active a {
    background-color: red;
    color: white;
    transition: 0.6s ease;
  }
  ul li.active a:hover {
    text-decoration: none;
    color: red;
    padding: 5px 20px;
    border: 1px solid red;
    background: none;
  }
  #btn {
    border: 1px solid red;
    padding: 10px 30px;
    color: red;
    text-decoration: none;
    background-color: #ededed;
    outline: none;
    transition: 0.6s ease;
  }
  #btn:hover {
    background-color: red;
    color: #ededed;
    cursor: pointer;
    outline: none;
    transition: 0.6s ease;
    transform: scale(1.075);
  }
  center h1 {
    color: red;
  }
  #channel {
    color: white;
    background-color: #7289DA;
  }
  #editor-beret {
    -webkit-filter: opacity(1) drop-shadow(0 0 0 black);
    filter: opacity(1) drop-shadow(0 0 0 black);
    width: 100px;
    height: 100px;
  }
  fieldset{
    border: none;
  }
  output{
    display: inline-block;
    min-width: 2.5em;
  }
  label, output{
    padding: 2px 9px;
    border-radius: 3px;
    font-family: 'Roboto', sans-serif;
    color: #000;
    font-size: 1.1em;
  }
  label[for=r], output[for=r]{
    background-color: #f00;
  }
  label[for=g], output[for=g]{
    background-color: #0f0;
  }
  label[for=b], output[for=b]{
    background-color: #00f;
  }
  #editor-face {
    width: 100px;
    height: 100px;
  }
</style>

<html>
  <head>
    <title>Redberet - Editor</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="icon" href="blogo.ico" />
    <meta name="description" content="Redberet's official website">
    <meta name="keywords" content="miracle,ide,coding,programming,code,program,software,download,informatics,ict,it">
    <meta name="author" content="Redberet official website">
    <meta property="og:image" content="https://beretgang.github.io/red/blogo.png">
    <meta name="theme-color" content="#ff0000">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="row">
      <div class="col-md-12">
        <div id="nav">
          <a href="https://beretgang.github.io/red/"><img id="logo" src="blogo.png"></a>
          <h3>Redberet</h3>
          <ul>
            <li><a href="https://beretgang.github.io/red/">Home</a></li>
            <li><a href="about">About</a></li>
            <li><a href="donate">Donate</a></li>
            <li><a href="smp-uhc">SMP and UHC</a></li>
            <li><a href="youtube">Youtube</a></li>
            <li><a href="discord">Discord</a></li>
            <li><a href="shop">Shop</a></li>
            <li class="active"><a href="editor">Editor</a></li>
          </ul>
        </div>
      </div>
    </div>
    <br>
    <br>
    <center>
      <h1>Character Editor</h1>
      <br>
      <h3>Beret color:</h3>
      <img id="editor-beret" src="hat.png">
      <fieldset>
        <label for="r">R</label>
        <input type="range" min="0" max="255" id="r" step="1" value="0">
        <output for="r" id="r_out">0</output>
      </fieldset>  

      <fieldset>
        <label for="g">G</label>
        <input type="range" min="0" max="255" id="g" step="1" value="0">
        <output for="g" id="g_out">0</output>
      </fieldset>

      <fieldset>
        <label for="b">B</label>
        <input type="range" min="0" max="255" id="b" step="1" value="0">
        <output for="b" id="b_out">0</output>
      </fieldset>
      <br>
      <h3>Face:</h3>
      <img id="editor-face" class="editor-face-selection" src="https://beretgang.github.io/red/faces/face1.png">
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face1.png" onClick="face1();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face2.png" onClick="face2();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face3.png" onClick="face3();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face4.png" onClick="face4();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face5.png" onClick="face5();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face6.png" onClick="face6();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face7.png" onClick="face7();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face8.png" onClick="face8();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face9.png" onClick="face9();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face10.png" onClick="face10();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face11.png" onClick="face11();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face12.png" onClick="face12();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face13.png" onClick="face13();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face14.png" onClick="face14();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face15.png" onClick="face15();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face16.png" onClick="face16();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face17.png" onClick="face17();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face18.png" onClick="face18();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face19.png" onClick="face19();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face20.png" onClick="face20();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face21.png" onClick="face21();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face22.png" onClick="face22();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face23.png" onClick="face23();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face24.png" onClick="face24();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face25.png" onClick="face25();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face26.png" onClick="face26();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face27.png" onClick="face27();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face28.png" onClick="face28();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face29.png" onClick="face29();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face30.png" onClick="face30();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face31.png" onClick="face31();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face32.png" onClick="face32();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face33.png" onClick="face33();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face34.png" onClick="face34();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face35.png" onClick="face35();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face36.png" onClick="face36();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face37.png" onClick="face37();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face38.png" onClick="face38();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face39.png" onClick="face39();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face40.png" onClick="face40();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face41.png" onClick="face41();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face42.png" onClick="face42();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face43.png" onClick="face43();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face44.png" onClick="face44();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face45.png" onClick="face45();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face46.png" onClick="face46();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face47.png" onClick="face47();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face48.png" onClick="face48();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face49.png" onClick="face49();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face50.png" onClick="face50();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face3.png" onClick="face3();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face52.png" onClick="face52();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face53.png" onClick="face53();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face3.png" onClick="face3();"></button>
      <br>
      <br>
      <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face55.png" onClick="face55();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face56.png" onClick="face56();"></button>   <button><img id="editor-face" src="https://beretgang.github.io/red/faces/face3.png" onClick="face3();"></button>
    </center>
  </body>
</html>

我想去除背景并用所选颜色填充贝雷帽。我还想用贝雷帽+脸保存图像。但是我该怎么做呢？

【问题讨论】：

您希望用户下载最终图像还是将其发送到服务器？
用户下载

标签： javascript html css

【解决方案1】：

您应该使用画布来执行此操作。您可以像这样将这两个图像渲染到画布上：

  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

贝雷帽图片最好使用透明背景，可以在贝雷帽里面保持白色，外面保持透明，这样就可以在画布上无缝渲染。

有关在画布上绘图的更多信息：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage

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

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

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

关于图书馆的更多信息：https://github.com/hongru/canvas2image

【讨论】：

但是贝雷帽里面是白色的，外面是透明的，如何改变贝雷帽的颜色呢？
您可以使用 Photoshop 之类的照片编辑器来完成此操作，然后制作 PNG 图像。
但是如何让它用 RGB 滑块改变颜色呢？
我编辑了我的帖子，所以现在它还显示了 RGB 滑块代码以帮助您
这对着色有帮助吗：stackoverflow.com/questions/45706829/… 你可以这样做，然后将面部图像绘制到画布上

【解决方案2】：

如果您想在 Javascript 中呈现图像，最好的解决方案是使用画布。这些，您可以导出并且可以在画布中轻松组合图像。也许，这个问题会对你有所帮助：Canvas - Combing two images, return one img html object?

另一种解决方案是在您的服务器上处理图像。如果你使用 PHP 为例，你可以用 PHP 组合图像。

【讨论】：

感谢您的回答，但我会使用 Sylens 的回答。