如何按路径而不是区域裁剪画布图像

Question

Im making a painting tool, and one of the feature is showing cropped image of the drawn path.

The path I have drawn(image)

For example in above the picture, the white colored path indicates what I have drawn, just like a painting tool.

Cropped image

And here is the cropped image of the path. If you look at the picture, you can see that it crops the image as if the path is closed and therefore it crops the image "area" not the path.

and here is the code

function crop({ image, points }) {
  return Observable.create(observer => {
    const { width, height } = getImageSize(image);
    const canvas = document.createElement('canvas') as HTMLCanvasElement;
    const context = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    context.beginPath();
    points.forEach(([x, y], idx) => {
      if (idx === 0) {
        context.moveTo(x, y);
      } else {
        context.lineTo(x, y);
      }
    });
    context.clip();

    context.drawImage(image);

    ...etc
}

The crop function receives points which is consisted [x coordinate, y coordinate][ ] of the drawn path.

Is there an way to show image only the path that I've painted?

Answer 1

That's more what is generally called a mask then, but note that both for the current clip or for the mask you want to attain, the best is to use compositing.

Canvas context has various compositing options , allowing you to generate complex compositions, from pixels's alpha value.

 const ctx = canvas.getContext('2d'); const pathes = [[]]; let down = false; let dirty = false; const bg = new Image(); bg.onload = begin; bg.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Serene_Sunset_%2826908986301%29.jpg/320px-Serene_Sunset_%2826908986301%29.jpg'; function begin() { canvas.width = this.width; canvas.height = this.height; ctx.lineWidth = 10; addEventListener('mousemove', onmousemove); addEventListener('mousedown', onmousedown); addEventListener('mouseup', onmouseup); anim(); ctx.fillText("Use your mouse to draw a path", 20,50) } function anim() { requestAnimationFrame(anim); if(dirty) draw(); dirty = false; } function draw() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.drawImage(bg, 0, 0); ctx.beginPath(); pathes.forEach(path => { if(!path.length) return; ctx.moveTo(path[0].x, path[0].y); path.forEach(pt => { ctx.lineTo(pt.x, pt.y); }); }); // old drawings will remain on where new drawings will be ctx.globalCompositeOperation = 'destination-in'; ctx.stroke(); // reset ctx.globalCompositeOperation = 'source-over'; } function onmousemove(evt) { if(!down) return; const rect = canvas.getBoundingClientRect(); pathes[pathes.length - 1].push({ x: evt.clientX - rect.left, y: evt.clientY - rect.top }); dirty = true; } function onmousedown(evt) { down = true; } function onmouseup(evt) { down = false; pathes.push([]); } 

 canvas {border: 1px solid} 

 <canvas id="canvas"></canvas> 

Don't hesitate to look at all the compositing options, various cases will require different options, for instance if you need to draw multiple paths, you may prefer to render first your paths and then keep your image only where you did already drawn, using the source-atop option:

 const ctx = canvas.getContext('2d'); const pathes = [[]]; pathes[0].lineWidth = (Math.random() * 20) + 0.2; let down = false; let dirty = false; const bg = new Image(); bg.onload = begin; bg.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Serene_Sunset_%2826908986301%29.jpg/320px-Serene_Sunset_%2826908986301%29.jpg'; function begin() { canvas.width = this.width; canvas.height = this.height; addEventListener('mousemove', onmousemove); addEventListener('mousedown', onmousedown); addEventListener('mouseup', onmouseup); anim(); ctx.fillText("Use your mouse to draw a path", 20,50) } function anim() { requestAnimationFrame(anim); if(dirty) draw(); dirty = false; } function draw() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); pathes.forEach(path => { if(!path.length) return; ctx.beginPath(); ctx.lineWidth = path.lineWidth; ctx.moveTo(path[0].x, path[0].y); path.forEach(pt => { ctx.lineTo(pt.x, pt.y); }); ctx.stroke(); }); // new drawings will appear on where old drawings were ctx.globalCompositeOperation = 'source-atop'; ctx.drawImage(bg, 0, 0); // reset ctx.globalCompositeOperation = 'source-over'; } function onmousemove(evt) { if(!down) return; const rect = canvas.getBoundingClientRect(); pathes[pathes.length - 1].push({ x: evt.clientX - rect.left, y: evt.clientY - rect.top }); dirty = true; } function onmousedown(evt) { down = true; } function onmouseup(evt) { down = false; const path = []; path.lineWidth = (Math.random() * 18) + 2; pathes.push(path); } 

 canvas {border: 1px solid} 

 <canvas id="canvas"></canvas> 

And also remember that you can very well have canvases that you won't append to the document that you can use as layers to generate really complex compositions. ( drawImage() does accept a <canvas> as source).