我想更改 html5-canvas 中图像内部图像的颜色

Question

我正在使用 canvas 制作徽章。为了绘制图像，我使用了代码：

let image = new Image()
image.src = 'imageSource'
image.onload = () => {
 ctx.drawImage(image, xOffset, yOffset, newWidth, newHeight)

 // to color the image at the back (works properly)

 ctx.globalCompositeOperation = 'source-in'
 ctx.fillStyle = 'someColour'
 ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
 ctx.globalCompositeOperation = 'source-over'

  // icon in the middle

  let iconImage = new Image()
  iconImage.src = 'iconSource'
  iconImage.onload = () => {
      ctx.drawImage(iconImage, xOffset, yOffset, width, height)

      // i need to be able to fill color in this iconImage only
}

预览图是这样的

canvas-image

现在，为了给图像上色，我尝试使用不同的混合模式。当我为 image 的背景工作时，它工作正常。我尝试以同样的方式对 iconImage 执行此操作，但没有成功。我想在不改变任何其他东西的情况下为中间的图标着色。

Answer 1

早上无聊给大家做了个例子在这个例子中可以看到canvas里面的所有元素都可以修改

注意：由于CORS问题(Tainted canvases may not be exported)，无法在此处编辑外部图像的颜色，因此请使用选择文件导入图像然后更改图像颜色！

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d")
const inputs = document.querySelectorAll("input");
const xOffset = 30, yOffset = 10, width = canvas.width-60, height = canvas.height-20;

var inputValues = {stroke:"#8db5c2",fill:"white",text:"Text",image:"https://i.stack.imgur.com/8eLMW.png",imageColor:"grey"}

inputs.forEach(input => {
  input.addEventListener("input", function() {
    if(this.id === "image") {
      if (!input.files || !input.files[0]) return;
      const FR = new FileReader();
      FR.onloadend = (evt) => {
          inputValues = {...inputValues,[this.id]:FR.result};
          DrawBadge(inputValues)
      };
      FR.readAsDataURL(input.files[0]);
    } else {
      inputValues = {...inputValues,[this.id]:this.value};
      DrawBadge(inputValues)
    }
  })
})

DrawBadge(inputValues)

function DrawBadge ({stroke, fill, text, image ,imageColor}) {
  //Draw Badge
  ctx.strokeStyle = stroke;
  ctx.lineWidth = 15;
  ctx.fillStyle = fill;
  roundRect(ctx, xOffset, yOffset, width, height, {
    tl: 1,
    tr: 1,
    bl: width/2,
    br: width/2,
  });
  //Draw Text
  ctx.font = "20px Arial";
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = "black";
  ctx.fillText(text,width/2+xOffset,height*0.8);
  //Draw Image
  const firstImage = new Image();
  const insideWidth = 80, insideHeight = 80;
  firstImage.src = image;
  // Because of the CORS issue just show image as it is
  if(image === "https://i.stack.imgur.com/8eLMW.png") {
    firstImage.onload = () => {
      ctx.drawImage(firstImage, (width/2)-(insideWidth/2)+xOffset,height*0.2,insideWidth , insideHeight);
     }
  // you should use this function for changing image color
  } else {
    firstImage.onload = () => {
      //Make new canvas for image
      const imageCtx = document.createElement("canvas").getContext("2d");
      const insideImage = new Image();
      imageCtx.canvas.width = insideWidth;
      imageCtx.canvas.height = insideHeight;
      imageCtx.save();
      imageCtx.fillStyle = imageColor;
      imageCtx.fillRect(0, 0, insideWidth, insideHeight);
      //Here magic happend 
      imageCtx.globalCompositeOperation = "destination-in";
      imageCtx.drawImage(firstImage,0,0,insideWidth,insideHeight);
      //Then export our canvas to png image
      insideImage.src = imageCtx.canvas.toDataURL("image/png");
      insideImage.onload = () => {
          ctx.drawImage(insideImage,(width/2)-(insideWidth/2)+xOffset,height*0.2,insideWidth,insideHeight);
      }
    }
  }
}

function roundRect(ctx, x, y, width, height, radius, fill, stroke){
  ctx.beginPath();
  ctx.moveTo(x + radius.tl, y);
  ctx.lineTo(x + width - radius.tr, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
  ctx.lineTo(x + width, y + height - radius.br);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
  ctx.lineTo(x + radius.bl, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
  ctx.lineTo(x, y + radius.tl);
  ctx.quadraticCurveTo(x, y, x + radius.tl, y);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}

body {
 display: flex;
}
#inputs {
  display: flex;
  flex-direction: column;
}
canvas {
   border: 1px solid;
}

<body>
  <div id="inputs">
    Stroke Color: <input id="stroke" type="color" value="#8db5c2">
    Fill Color: <input id="fill" type="color" value="#ffffff">
    Text: <input id="text" type="text" value="Text">
    <lable>
    Image:<input id="image" type="file"accept="image/png, image/jpeg">
     ImageColor: <input id="imageColor" type="color" value="#808080">
     </lable>
  </div>
  <canvas width="220" height="190"></canvas>
</body>

我想更改 html5-canvas 中图像内部图像的颜色

I want to change the color of an image inside a image in html5-canvas

javascript

html5-canvas

reactjs