Question

在我的项目中，我使用画布设计显示图像预览。我的原始图片是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>

还有其他方法可以实现吗？任何可用的插件？

Answer 1

这取决于你所说的“清楚”。如果您正在寻找透明度，那么默认情况下画布是透明的，您确实可以看到弯曲位置周围的弯曲图像背后的背景。为了更好地看到这一点，请设置正文的背景颜色。

那么你是如何得出它不透明的结论的呢？您是否将图像导出为支持透明度的格式，例如.gif或.png？注意：.jpg不支持它。

编辑：问题中的澄清使得这个答案不再适用。请参考其他答案。

Answer 2

图像清晰地以整数值切割，这可能是使用中特定浏览器的bcos。您可以尝试以双倍分辨率绘制弯曲图像，然后将其缩小一半。无论我做什么，我都无法获得jaggis，但我无法通过safari进行测试。你应该在其他浏览器中测试，看看情况就是这样。

- 更新 -

我在下面添加了修改后的代码（代码基于markE＆＃39的示例）。主要变化是您使用两个缩放因子：一个用于内部缩放以补偿整数别名，然后是目标缩放。通过缩小这种方式，浏览器应该平滑图像。如果需要，尝试更高的缩放值。如果太高的差异你可能需要缩小比一个更多的步骤。我发现这个answer和answer有助于解决这个问题。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何删除画布中锯齿状的线条？

2 个答案: