javascript - 图像作为 html Canvas 的模板

Question

我正在尝试让用户手动为图像的某些部分着色。举个例子，这是一只猫 https://techflourish.com/images/3-cat-clipart-9.png 。如果用户愿意，他们应该能够给猫的脚上色。我希望它们仅在 Canvas 的猫 body 图像部分内着色(不是图像的背景部分或 Canvas 的空白，但我想我可以手动 trim 图像)。

到目前为止我所做的尝试如下。基本上，我检查我所在位置的像素颜色，并仅在不是背景颜色时才进行绘制。这种方法确实有效，但我很容易就会流血，因为有什么东西不对劲。我想知道是否可以设置特定的剪辑区域，但无法弄清楚。

`

    var canvas = document.getElementById("space");
    var ctx = canvas.getContext("2d");

    var pos = { x: 0, y: 0 };

    // new position from mouse events
    function setPosition(e) {
        pos.x = e.clientX;
        pos.y = e.clientY;
    }

    function rgbToHex(r, g, b) {
        if (r > 255 || g > 255 || b > 255)
            throw "Invalid color component";
        return ((r << 16) | (g << 8) | b).toString(16);
    }

    function draw(e) {
        if (e.buttons !== 1) return; // if mouse is pressed.....

        var color = "#cb3594";

        ctx.beginPath(); // begin the drawing path

        ctx.lineWidth = 5; // width of line
        ctx.lineCap = "round"; // rounded end cap
        ctx.strokeStyle = color; // hex color of line

        var p = ctx.getImageData(pos.x, pos.y, 1, 1).data;
        var sourceColor = rgbToHex(p[0], p[1], p[2]);
        if(sourceColor != "BACKGROUNDHEX" && sourceColor != color) {
            ctx.moveTo(pos.x, pos.y); // from position
            setPosition(e);
            p = ctx.getImageData(pos.x, pos.y, 1, 1).data;
            targetColor = rgbToHex(p[0], p[1], p[2]);

            if(targetColor != "BACKGROUNDHEX" && targetColor != color) {
                ctx.lineTo(pos.x, pos.y); // to position
                ctx.stroke(); // draw it!
            }
        }

    }

    var outlineImage = new Image();
    outlineImage.onload = function() {
        ctx.drawImage(outlineImage, 0, 0, 704, 720);
    }
    outlineImage.src = "IMAGE.png";

    space.addEventListener("mousemove", draw);
    space.addEventListener("mousedown", setPosition);
    space.addEventListener("mouseenter", setPosition);


</script>

`

(相关编辑:出血是由于我的“sourceColor!= color”错误引起的，但问题仍然相关，因为这仍然不是一个很好的解决方案)

Answer 1

由于图像中您不想着色的部分是透明的，因此您可以设置上下文的 globalCompositeOperation到'source-atop'。之后，您绘制到 Canvas 上的任何像素都会自动采用覆盖像素的不透明度，并且您不必弄乱 getImageData:

var canvas = document.getElementById("space");
var ctx = canvas.getContext("2d");

var pos = {
  x: 0,
  y: 0
};

// new position from mouse events
function setPosition(e) {
  // offsetX/Y gives the correct coordinates within the canvas
  // assuming it has no padding
  pos.x = e.offsetX;
  pos.y = e.offsetY;
}

function draw(e) {
  if (e.buttons !== 1) return; // if mouse is pressed.....

  var color = "#cb3594";

  ctx.beginPath(); // begin the drawing path

  ctx.lineWidth = 5; // width of line
  ctx.lineCap = "round"; // rounded end cap
  ctx.strokeStyle = color; // hex color of line

  ctx.moveTo(pos.x, pos.y); // from position
  setPosition(e);
  ctx.lineTo(pos.x, pos.y); // to position
  ctx.stroke(); // draw it!
}

var outlineImage = new Image();
outlineImage.onload = function() {
  // the default, set explicitly because we're changing it elsewhere
  ctx.globalCompositeOperation = 'source-over';
  
  ctx.drawImage(outlineImage, 0, 0);

  // don't draw over the transparent parts of the canvas
  ctx.globalCompositeOperation = 'source-atop';
  
  // wait until the stencil is loaded before handing out crayons
  space.addEventListener("mousemove", draw);
  space.addEventListener("mousedown", setPosition);
  space.addEventListener("mouseenter", setPosition);
}
outlineImage.src = "/image/so095.png";

<canvas id="space" width="610" height="733"></canvas>