我想更改 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
}

預覽是這樣的。

畫布圖像

現在，為了給圖像着色，我嘗試使用不同的混合模式。 當我為image的背景工作時，它工作正常。 我嘗試以相同的方式為iconImage執行此操作，但沒有成功。 我想在不改變任何其他東西的情況下為中間的圖標着色。

Answer 1

早上無聊，給大家做個例子在這個例子中你可以看到canvas中的所有元素都可以修改。

注意：由於 CORS 問題（污染的畫布可能無法導出），無法在此處編輯外部圖像的顏色，所以使用選擇文件導入圖像然后更改圖像顏色！

 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 中圖像內圖像的顏色

問題描述

1 個解決方案

解決方案1
1 已采納 2021-01-19 09:29:50

我想更改 html5-canvas 中圖像內圖像的顏色

問題描述

1 個解決方案

解決方案1 1 已采納 2021-01-19 09:29:50

解決方案1
1 已采納 2021-01-19 09:29:50