如何从图像画布中裁剪颜色部分？

debugcn 发表于 Dev

戈瓦迪约

我正在研究基于离子的应用程序。

我想要像用户用手指在图像（画布）上填充红色的功能。所以我已经完成了填充功能，但我想从画布上裁剪填充部分。我附上了一张图片供参考。

我想从上面的图像中裁剪红色部分。我有谷歌搜索，但没有找到任何解决方案。

盲人67

创建图像蒙版。

如果您正在渲染选择区域（红色），那么解决方案很简单。

创建与绘图大小相同的第二个画布，不要将其添加到 DOM。在画布上绘制红色标记内容

The on the display canvas render the image first and then render that marking canvas over the image with composite mode like "overlay" so that the original image can be seen and the marked areas are red.

Now you have two layers, one is the image and the other the mask you can use to get a copy of the marked content.

To do that create a 3rd canvas, draw the original image onto it, then set the composite mode to "destination-in". Then draw the mask over it. Only the marked pixels will remain.

See the example for more details

setTimeout(example,0); // ensures that the run us after parsing
function example(){
  const ctx = canvas.getContext("2d");
  var w = canvas.width;
  var h = canvas.height;
  var cw = w / 2;  // center 
  var ch = h / 2;

  var selectLayer = CImageCtx(w,h); // creates a canvas 
  var selectedContent = CImageCtx(w,h); // the selected content
  document.body.appendChild(selectedContent);
  var image = new Image;  // the image
  image.src = " https://i.stack.imgur.com/QhFct.png";
  // updates the masked result
  function updateSelected(){
    var ctx = selectedContent.ctx;
    ctx.drawImage(image,0,0);
    ctx.globalCompositeOperation = "destination-in";
    ctx.drawImage(selectLayer,0,0);
    ctx.globalCompositeOperation = "source-over";
  }
  function update(){
      // if mouse down then 
      if(mouse.but){
        // clear the mask if on the right image
        if(mouse.oldBut === false && mouse.x > 256){
           selectLayer.ctx.clearRect(0,0,w,h);
           mouse.but = false;
        }else{
           // draw the red 
           selectLayer.ctx.fillStyle = "red";
           fillCircle(mouse.x, mouse.y, 20, selectLayer.ctx);
        }
        // update the masked result
        updateSelected();
      }

      // clear the canvas
      ctx.clearRect(0,0,w,h);
      // draw the image
      ctx.drawImage(image,0,0);
      // then draw the marking layer over it with comp overlay
      ctx.globalCompositeOperation = "overlay";
      ctx.drawImage(selectLayer,0,0);
      ctx.globalCompositeOperation = "source-over";

      mouse.oldBut = mouse.but;
      requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}






//#############################################################################
// helper functions not part of the answer
//#############################################################################
const mouse  = {
  x : 0, y : 0, but : false,
  events(e){
    const m = mouse;
    const bounds = canvas.getBoundingClientRect();
    m.x = e.pageX - bounds.left - scrollX;
    m.y = e.pageY - bounds.top - scrollY;
    m.but = e.type === "mousedown" ? true : e.type === "mouseup" ? false : m.but;
  }
};
(["down","up","move"]).forEach(name => document.addEventListener("mouse" + name,mouse.events));
const CImage = (w = 128, h = w) => (c = document.createElement("canvas"),c.width = w,c.height = h, c);
const CImageCtx = (w = 128, h = w) => (c = CImage(w,h), c.ctx = c.getContext("2d"), c);
const fillCircle = (l,y=ctx,r=ctx,c=ctx) =>{if(l.p1){c=y; r=leng(l);y=l.p1.y;l=l.p1.x }else if(l.x){c=r;r=y;y=l.y;l=l.x}c.beginPath(); c.arc(l,y,r,0,Math.PI*2); c.fill()}

body { font-family : arial; }
canvas { border : 2px solid black; }

Draw on image and the selected parts are shown on the right<br>
Click right image to reset selection<br>
<canvas id="canvas" width=256 height=256></canvas>

Already masked.

If the red mask is already applied to the image then there is not much you can do apart from do a threshold filter depending on how red the image is. But even then you are going to have problems with darker areas, and areas that already contain red.

除非您拥有原始图像，否则效果会很差。

如果您拥有原始图像，则必须访问图像数据并通过比较每个像素并仅选择不同的像素来创建新图像作为掩码。这将迫使您仅使用相同的域图像（或使用 CORS 跨域标头）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-15

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章