图像上的画布圆角 - Javascript

在网页设计中，我们经常需要对图片进行美化处理，其中一个常见的需求就是给图片添加圆角。本文将介绍如何使用Javascript对图片进行圆角处理。

实现方法

第一步：创建画布

我们需要创建一个画布，将图片绘制在画布上。

// 获取图片
var img = document.getElementById('picture');

// 创建画布
var canvas = document.createElement('canvas');

第二步：绘制图片

使用 drawImage 方法，在画布上绘制图片。

// 设置画布大小
canvas.width = img.width;
canvas.height = img.height;

// 获取画布上下文
var ctx = canvas.getContext('2d');

// 绘制图片
ctx.drawImage(img, 0, 0);

第三步：处理圆角

绘制圆角的方法是使用 arc 方法。

// 处理圆角
var radius = 100;
ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(canvas.width - radius, 0);
ctx.arcTo(canvas.width, 0, canvas.width, radius, radius);
ctx.lineTo(canvas.width, canvas.height - radius);
ctx.arcTo(canvas.width, canvas.height, canvas.width - radius, canvas.height, radius);
ctx.lineTo(radius, canvas.height);
ctx.arcTo(0, canvas.height, 0, canvas.height - radius, radius);
ctx.lineTo(0, radius);
ctx.arcTo(0, 0, radius, 0, radius);
ctx.closePath();
ctx.clip();

第四步：绘制圆角图片

使用 drawImage 方法，将处理好的图片绘制到画布上。

// 绘制圆角图片
var newImg = new Image();
newImg.src = canvas.toDataURL('image/jpeg');
document.body.appendChild(newImg);

示例代码

var img = document.getElementById('picture');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);

var radius = 100;
ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(canvas.width - radius, 0);
ctx.arcTo(canvas.width, 0, canvas.width, radius, radius);
ctx.lineTo(canvas.width, canvas.height - radius);
ctx.arcTo(canvas.width, canvas.height, canvas.width - radius, canvas.height, radius);
ctx.lineTo(radius, canvas.height);
ctx.arcTo(0, canvas.height, 0, canvas.height - radius, radius);
ctx.lineTo(0, radius);
ctx.arcTo(0, 0, radius, 0, radius);
ctx.closePath();
ctx.clip();

var newImg = new Image();
newImg.src = canvas.toDataURL('image/jpeg');
document.body.appendChild(newImg);

总结

通过以上方法，我们能够在网页上实现图片圆角的效果。需要注意的是，由于图片需要绘制在画布上，所以需要处理图片跨域的问题。如果是同域名下的图片，可以直接使用上述方法；否则需要在服务器端将图片转为base64编码后再传输到客户端。