Question

在我的特定情况下，我需要让图像的底部边框看起来像这样：

图像不会扭曲，只是部分图像被底部的边框曲线切断。当然，我可以编辑图像并使该部分透明以达到预期的效果，但我想知道如何使用CSS或可能的JavaScript。图像需要能够具有相对大小（即可以在其上设置width: 100%），并且曲线应该与图像的大小成比例。

我第一次看了HTML画布，我可以在底部定义一个Bezier曲线的矩形剪裁区域，并在剪切的上下文中绘制图像，但似乎它不能满足相对尺寸要求。

但是使用更简单的解决方案可以实现类似的效果，可能不使用画布吗？

Answer 1

您可以使用SVG或html5 Canvas将img剪切到带有弯曲底部的矩形中。

以下是如何使用html5 Canvas：

创建一个html5画布。
使用路径命令定义弯曲底部的矩形。
从路径
将图像对象绘制到画布中。它只会显示在裁剪区域内。
您可以使用context.scale根据需要调整路径和图片的大小。

＆＃13;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/jellybeans.jpg";
function start(){
    document.getElementById('container').appendChild(clippedImg(img,100,100,0.25,0.50));
    document.getElementById('container').appendChild(clippedImg(img,100,100,0.25,1.00));
    document.getElementById('container').appendChild(clippedImg(img,100,100,0.25,2.00));
}


function clippedImg(img,w,h,curvePct,scaleFactor){
    var c=document.createElement('canvas');
    var ctx=c.getContext('2d');
    c.width=w*scaleFactor;
    c.height=h*(1+curvePct)*scaleFactor;
    ctx.scale(scaleFactor,scaleFactor);
    ctx.beginPath();
    ctx.moveTo(0,h);
    ctx.bezierCurveTo(w/4,h*(1-curvePct),w*3/4,h*(1+curvePct),w,h);
    ctx.lineTo(w,0);
    ctx.lineTo(0,0);
    ctx.lineTo(0,h);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    return(c);
}

＆＃13;

body{ background-color: ivory; }
canvas{margin:5px;}

＆＃13;

<h4>Clipped image into an html5 canvas</h4>
<div id=container></div>

＆＃13;

Answer 2

你可以尝试这个CSS技巧：

.masked { position:relative; }

.masked:after {
   position:absolute;
   width:100%;
   display:block;
   content: "";
   background:url(myImgMask.png/svg);
   height:10px;
   left:0;
   right:0;
   bottom:0;
}

<强>解释

基本上你必须创建一个PNG或SVG图像，它在顶部是透明的（在曲线上方）并且具有纯色填充（例如白色），然后通过伪选择器将其放置在元素的顶部（{ {1}}）

Answer 3

正弦波底部边界。

＆＃13;

var img = document.getElementById('my_img');
img.width = 100;
img.height = 100;

function genSnow(img) {
  var can = document.createElement('canvas');
  var w = can.width = img.width;
  var h = can.height = img.height;
  var ctx = can.getContext('2d');
  var imageData = ctx.getImageData(0, 0, w, h);
  var d = imageData.data;

  for (var i = 0; i < d.length; i += 4) {
    d[i] = d[i + 1] = d[i + 2] = Math.floor(Math.random() * 128);
    d[i + 3] = 255;
  }

  ctx.putImageData(imageData, 0, 0);
  img.src = can.toDataURL();
}


img.onload = function() {
  img.onload = null;
  sineBorder(this, 10, 2);
};

genSnow(img);


function sineBorder(img, heightPercent, ocillations) {
  if (!ocillations) ocillations = 2;
  if (!heightPercent) heightPercent = 20;
  heightPercent /= 100;
  
  var can = document.createElement('canvas');
  var w = can.width = img.width;
  var h = can.height = img.height;
  var ctx = can.getContext('2d');
  ctx.drawImage(img, 0, 0);
  var imageData = ctx.getImageData(0, 0, w, h);
  var d = imageData.data;
  var o = (ocillations * Math.PI) / img.width;
  var hi = (h * heightPercent);
  var a = 0;
  
  for (var x = 0; x < img.width; x++) {
    var s = Math.sin(a)  * hi;
    var y = Math.floor(h - hi - s);
    
    for (;y < h; y++) {
      var i = ((w * 4) * y) + (x * 4);
      d[i] = 255;
      d[i+1] = 0;
      d[i+2] = 0;
      d[i+3] = 0;
    }
    a += o;
  }

  ctx.putImageData(imageData, 0, 0);
  img.src = can.toDataURL();

}

＆＃13;

<img id="my_img" src="">

＆＃13;

HTML元素的弯曲（非圆角）边框

3 个答案: