캔버스를 사용하여 배지를 만들고 있습니다. 이미지를 그리기 위해 코드를 사용했습니다.
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같은 방식으로 시도했지만 작동하지 않았습니다. 다른 것을 변경하지 않고 가운데에있는 아이콘에 색상을 지정하고 싶습니다.
저는 아침에 지루해서이 예제를 만들었습니다.이 예제에서는 캔버스의 모든 요소를 수정할 수 있음을 알 수 있습니다.
참고 : 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다