html5 캔버스 이미지 부드러운 가장자리가있는 이미지 자르기

Question

나는이 (https://github.com/netplayer/crop) 저장소를 따라하고 일부 변경 사항으로 이미지 자르기 도구를 만들었습니다. 패턴과 선을 사용하여 이미지를 자르면 들쭉날쭉 한 가장자리로 이미지가 잘립니다. 어떻게 내가 가장자리의 계단 현상을 제거하고 Photoshop.Here 깃털 기능과 같은 이미지 주위에 약간의 그림자를 적용하는 것은 여기에 fiddle

내 코드의 관련 부분입니다

var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 
    var points=[]; 
    ctx.save(); 
    ctx.beginPath(); 
    var offset = $('#myCanvas').offset(); 
    for (var i = 0; i < points.length; i += 2) { 
     var x = parseInt(jQuery.trim(points[i])); 
     var y = parseInt(jQuery.trim(points[i + 1])); 
     if (i == 0) { 
      ctx.moveTo(x - offset.left, y - offset.top); 
     } else { 
      ctx.lineTo(x - offset.left, y - offset.top); 
     } 



    } 
    ctx.restore(); 
    var pattern = ctx.createPattern(imageObj, "repeat"); 
    ctx.fillStyle = pattern; 
    ctx.fill(); 

Answer 1

여기 합성을 사용하여 하나의 방법이고 그림자 :

• 경로에서 마스킹 이미지를 만듭니다. 마스크는 섀도 잉을 사용하여 깃털 처리 된 가장자리가있는 사용자의 채워진 경로입니다. 아래 이미지는 별 모양의 마스크입니다. 섀도 잉으로 만드는 깃털 가장자리를 확인하십시오.

는 캔버스에 마스크를 그립니다.

• 'source-in'에 합성을 설정하면 기존의 픽셀이 투명하지 않은 경우에만 새 그림이 그려집니다.

• 캔버스에 차 이미지를 그립니다. 합성 덕분에 이미지는 사용자의 경로 내에서만 그려지며 마스크와 마찬가지로 깃털 모양이됩니다.

예 코드와 데모 :

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

 
var fadeLength=20; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/car.jpg"; 
 
function start(){ 
 

 
    var mask=document.createElement('canvas'); 
 
    var mctx=mask.getContext('2d'); 
 

 
    canvas.width=mask.width=img.width; 
 
    canvas.height=mask.height=img.height; 
 

 
    mctx.translate(-500,0); 
 

 
    mctx.shadowColor='black'; 
 
    mctx.shadowOffsetX=500; 
 
    mctx.shadowOffsetY=0; 
 
    mctx.shadowBlur=fadeLength; 
 

 
    drawStar(mctx,150,120,5,90,30); 
 
    drawStar(mctx,150,120,5,90,30); 
 

 
    mctx.translate(500,0); 
 

 
    ctx.drawImage(mask,0,0); 
 

 
    ctx.globalCompositeOperation='source-in' 
 
    ctx.drawImage(img,0,0); 
 

 
} 
 

 

 
function drawStar(ctx,cx,cy,spikes,outerRadius,innerRadius){ 
 
    var rot=Math.PI/2*3; 
 
    var x=cx; 
 
    var y=cy; 
 
    var step=Math.PI/spikes; 
 

 
    ctx.strokeSyle="#000"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(cx,cy-outerRadius) 
 
    for(i=0;i<spikes;i++){ 
 
    x=cx+Math.cos(rot)*outerRadius; 
 
    y=cy+Math.sin(rot)*outerRadius; 
 
    ctx.lineTo(x,y) 
 
    rot+=step 
 

 
    x=cx+Math.cos(rot)*innerRadius; 
 
    y=cy+Math.sin(rot)*innerRadius; 
 
    ctx.lineTo(x,y) 
 
    rot+=step 
 
    } 
 
    ctx.lineTo(cx,cy-outerRadius) 
 
    ctx.closePath(); 
 
    ctx.fillStyle='black'; 
 
    ctx.fill(); 
 
}

body{ background-color:white; padding:10px;} 
 
canvas{border:1px solid red; background-color:black;}

<canvas id="canvas" width=300 height=300></canvas>