キャンバスでギザギザの線を取り除くには？

私のプロジェクトでは、キャンバスデザインを使用してイメージプレビューを表示しています。私の元の画像は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

画像は、特定のブラウザが使用している整数値で明確に切り取られています。曲がった画像を2倍の解像度で描画し、サイズの半分に戻すことができます。私は何でも私はジャグジーを得ることができませんが、私はサファリでテストすることはできません。他のブラウザでテストして、これが正しいかどうか確認する必要があります。

--update--

Iは、以下の変更されたコード（マルケの例に基づいてコード）を加えました。主な変更点は、整数エイリアシングを補償するための内部スケーリングと、デスティネーションスケールの2つのスケーリングファクタを使用することです。このように縮小することで、ブラウザは画像を滑らかにするはずです。必要に応じてより高いスケーリング値を試してください。あまりにも高い差分がある場合は、おそらく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

キャンバスでギザギザの線を取り除くには？

答えて

関連する問題