캔버스에서 들쭉날쭉 한 선을 제거하는 방법은 무엇입니까?

내 프로젝트에서 캔버스 디자인을 사용하여 이미지 미리보기를 보여주고 있습니다. 내 원본 이미지는 Original image 캔버스에서 들쭉날쭉 한 선을 제거하는 방법은 무엇입니까?

캔버스를 사용하여 위와 같이 구부러진이 Curved image입니다.

그러나 그것의 상단과 하단이 들쭉날쭉이다.

<!DOCTYPE HTML> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    </head> 
    <body> 
    <section id="test"></section> 
    <script> 
    var image = new Image(); 
    image.id = "imgBendSource"; 
    image.style.display = "none"; 
    image.onload = function() { 
    $("#test").append(image); 
    var newWidth = "415"; 
    var newHeight = "285"; 
    var img = document.getElementById("imgBendSource"); 
    var x1 = 415/2; 
    var x2 = 415; 
    var y1 = 15; // input y of O here 
    var y2 = 0; 
    var eb = (y2 * x1 * x1 - y1 * x2 * x2)/(x2 * x1 * x1 - x1 * x2 * x2); 
     var ea = (y1 - eb * x1)/(x1 * x1); 
     var canvasHeight = parseInt(newHeight) + y1; 
     // create a new canvas for bend image 
     var canvasElement = '<canvas id="imgBendCanvas" width="' + newWidth + '" height="' + canvasHeight + '"/>'; 

     $("#test").append(canvasElement); 
     canvasElement = document.getElementById("imgBendCanvas"); 
     var bendCtx = canvasElement.getContext('2d'); 

     for (var x = 0; x < newWidth; x++) { 
      // calculate the current offset 
      currentYOffset = (ea * x * x) + eb * x; 

      bendCtx.drawImage(img, x, 0, 1, newHeight, x, currentYOffset, 1, newHeight); 
     } 
    } 
    image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
</script> 
</body> 
</html>

다른 방법으로 달성 할 수 있습니까? 사용할 수있는 플러그인은 무엇입니까?

출처

2016-07-22 prisel

"취소"란 의미에 따라 다릅니다. 투명도를 찾고 있다면 기본적으로 캔버스가 투명하고 곡선 비트 주변의 곡선 이미지 뒤에 배경을 볼 수 있습니다. 더 잘 보시려면 몸의 배경색을 설정하십시오.

그럼 투명하지 않다는 결론에 어떻게 도달 했습니까? .gif 또는 .png와 같은 투명도를 지원하는 형식으로 이미지를 내보내시겠습니까? 참고 : .jpg는 지원하지 않습니다.

편집 : 질문에 대한 설명이 더 이상 관련성이 없습니다. 다른 대답을 참조하십시오.

출처

2016-07-22 13:49:26 AgataB

이미지는 특정 브라우저가 사용중인 정수 값으로 명확하게 잘라냅니다. 당신은 이중 해상도로 구부러진 이미지를 그려 넣고 크기의 반으로 되돌릴 수 있습니다. 나는 jaggis를 얻을 수는 없지만 사파리로 시험 할 수는 없다. 이 경우 다른 브라우저에서 테스트해야합니다.

--update--

I는 (마르크의 예에 기초하여 코드) 아래의 코드를 수정 첨가

. 주요 변경 사항은 두 개의 스케일링 요소를 사용한다는 것입니다. 하나는 정수 앨리어싱을 보완하기위한 내부 스케일링이고, 다른 하나는 대상 스케일입니다. 이 방법으로 축소하면 브라우저가 이미지를 부드럽게 처리해야합니다. 필요한 경우 높은 배율 값을 시도하십시오. 너비가 너무 높으면 1 단계가 아닌 여러 단계로 확장이 필요할 것입니다. 이 문제를 해결하는 데 도움이되는 answer과이 answer을 발견했습니다.

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

 
var img=new Image(); 
 
img.onload=start; 
 
img.src='http://i.stack.imgur.com/OgllG.png'; 
 
function start(){ 
 
    //----changes here 
 
    var scalingFactor=2.0; // the internal scaling 
 
    var scalingFactorDst=0.5; // target scaling 
 
    var curved=curveImage(img,15,2,scalingFactor); 
 
    ctx.drawImage(curved,5,5,curved.width*scalingFactorDst,curved.height*scalingFactorDst);  
 
    //----end of changes 
 
} 
 

 
function curveImage(img,curveDepthY,blurFactor,scalingFactor){ 
 
    var c=document.createElement('canvas'); 
 
    var ctx=c.getContext('2d'); 
 
    c.width=img.width; 
 
    c.height=(img.height+curveDepthY+blurFactor); 
 
    // 
 
    var newWidth = img.width; 
 
    var newHeight = img.height; 
 
    var x1 = img.width/2; 
 
    var x2 = img.width; 
 
    var y1 = curveDepthY; // input y of O here 
 
    var y2 = 0; 
 
    var eb = (y2 * x1 * x1 - y1 * x2 * x2)/(x2 * x1 * x1 - x1 * x2 * x2); 
 
    var ea = (y1 - eb * x1)/(x1 * x1); 
 
    for (var x = 0; x < newWidth; x++) { 
 
     // calculate the current offset 
 
     currentYOffset = (ea * x * x) + eb * x; 
 
     ctx.drawImage(img, x, 0, 1, newHeight, x, currentYOffset, 1, newHeight); 
 
    } 
 
    // create a resized version of the curved image 
 
    //  with a shadow to help smooth the jaggies 
 
    var cc=document.createElement('canvas'); 
 
    var cctx=cc.getContext('2d'); 
 
    cc.width=img.width*scalingFactor; 
 
    cc.height=(img.height+curveDepthY+blurFactor)*scalingFactor; 
 
    cctx.scale(scalingFactor,scalingFactor); 
 
    cctx.shadowColor='gray'; 
 
    cctx.shadowBlur=blurFactor; 
 
    cctx.drawImage(c,0,0); 
 
    return cc; 
 
}

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

출처

2016-07-22 22:54:46 bjanes

안녕 bjanes, 당신은 pls 코드를 공유 할 수 있을까요? – prisel

@prisel sure! 추가 코드 – bjanes

안녕하세요 bjanes, 귀하의 회신에 감사드립니다. 이 코드는 IE에서만 훌륭하게 작동합니다. 다른 브라우저에서도이 문제를 해결하는 방법은 무엇입니까? – prisel

캔버스에서 들쭉날쭉 한 선을 제거하는 방법은 무엇입니까?

답변

관련 문제