wie gezackte Linien in Leinwand zu entfernen?

In meinem Projekt zeige ich eine Bildvorschau mit Canvas Design. Mein Originalbild ist Original image wie gezackte Linien in Leinwand zu entfernen?

Mit Leinwand ich oben und unten gebogen wie diese Curved image.

aber oben und unten ist gezackt.

<!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>

Gibt es einen anderen Weg, um es zu erreichen? irgendwelche plugins verfügbar?

Quelle

2016-07-22 prisel

Es hängt davon ab, was Sie mit "clear" meinen. Wenn Sie nach Transparenz suchen, ist die Leinwand standardmäßig transparent, und Sie können tatsächlich den Hintergrund hinter dem gekrümmten Bild um die gebogenen Teile sehen. Um das besser zu sehen, setze die Hintergrundfarbe des Körpers.

Wie sind Sie zu dem Schluss gekommen, dass es nicht transparent ist? Exportieren Sie das Bild in ein Format, das Transparenz unterstützt, z. B. .gif oder .png? Hinweis: .jpg unterstützt es nicht.

EDIT: die Klärung in der Frage macht diese Antwort nicht mehr relevant. Bitte beachten Sie die andere Antwort.

Quelle

2016-07-22 13:49:26 AgataB

Das Bild ist eindeutig auf ganzzahlige Werte zugeschnitten, die für den jeweiligen Browser verwendet werden können. Sie können versuchen, das gebogene Bild in doppelter Auflösung zu zeichnen und es in halber Größe zurückzuziehen. Ich kann die Jaggis nicht bekommen, egal was ich tue, aber ich kann nicht mit Safari testen. Sie sollten in anderen Browsern testen, um zu sehen, dass dies der Fall ist.

--update--

I-Code unten geändert hinzugefügt (Code basierend auf Markes Beispiel). Die wichtigsten Änderungen bestehen darin, dass Sie zwei Skalierungsfaktoren verwenden: einen für die interne Skalierung, um das Integer-Aliasing zu kompensieren, und dann die Zielskalierung. Wenn Sie auf diese Weise verkleinern, sollte der Browser das Bild glätten. versuchen Sie ggf. höhere Skalierungswerte. Bei zu hohen Diff müssen Sie wahrscheinlich in mehreren Schritten herunterskalieren. Ich fand diese answer und diese answer, die mit diesem Problem hilft.

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>

Quelle

2016-07-22 22:54:46 bjanes

Hallo bjanes, Könnten Sie pls Ihren Code teilen? – prisel

@prisel sicher! Code – bjanes

hinzugefügt Hi bjanes, Danke für Ihre Antwort. Dieser Code funktioniert nur mit IE. Wie behebe ich dieses Problem auch für andere Browser? – prisel

wie gezackte Linien in Leinwand zu entfernen?

Antwort

Verwandte Themen