Как удалить зубчатые линии в холсте?

В моем проекте я показываю предварительный просмотр изображения с использованием дизайна холста. Мое оригинальное изображение: Original image Как удалить зубчатые линии в холсте?

Использование холста I изогнуты сверху и снизу, как это 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

Это зависит от того, что вы подразумеваете под понятием «clear». Если вы ищете прозрачность, тогда холст прозрачен по умолчанию, и вы действительно можете увидеть фон за изогнутым изображением вокруг изогнутых битов. Чтобы лучше видеть это, установите цвет фона тела.

Как вы пришли к выводу, что он не прозрачен? Вы экспортируете изображение в формат, поддерживающий прозрачность, например .gif или .png? Примечание: .jpg не поддерживает его.

EDIT: разъяснение в вопросе делает этот ответ более неактуальным. См. Другой ответ.

источник

2016-07-22 13:49:26 AgataB

Изображение четко вырезано с целыми значениями, которые могут быть использованы в конкретном браузере. вы можете попытаться нарисовать изогнутое изображение в двойном разрешении и вернуть его на половину размера. Я не могу получить jaggis, что бы я ни делал, но я не могу проверить сафари. вы должны протестировать в других браузерах, чтобы убедиться, что это так.

--update--

Я добавил модифицированный код ниже (код, основанный на примере MARKE в). основные изменения заключаются в том, что вы используете два коэффициента масштабирования: один для внутреннего масштабирования, чтобы компенсировать целочисленное сглаживание, а затем целевую шкалу. путем уменьшения этого способа браузер должен сгладить изображение. при необходимости используйте более высокие значения масштабирования. если слишком высокий уровень разлома, вам, вероятно, потребуется уменьшить масштаб в несколько шагов, чем один. Я нашел это 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, могли бы вы пожалуйста поделиться код? – prisel

@prisel конечно! добавленный код – bjanes

Привет, пожалуйста, за ваш ответ. Этот код отлично работает с IE. как устранить эту проблему для других браузеров? – prisel

Как удалить зубчатые линии в холсте?

ответ

Смежные вопросы