ps如何裁剪不规则图片

在前端开发中，我们经常需要对图片进行裁剪操作，有些情况下，我们需要裁剪不规则形状的图片。本文将会介绍如何用 JavaScript 和 HTML canvas 对不规则形状的图片进行裁剪。 ## 一、使用 clip() 方法 canvas 上有个 clip() 方法，该方法接收一个 Path2D 对象或者路径字符串作为参数。根据路径所描述的形状，可以让画布只显示路径范围内的内容。我们可以利用此方法，裁剪出图片中的某个形状。 ```html

裁剪不规则图片方法一：使用 clip()

``` 以上代码中，我们首先创建了一个 Path2D 对象，它描述了一个圆形路径。接着我们加载一张图片，在图片加载完成后，绘制了原图到 canvas 上，再使用 clip() 方法来裁剪出圆形。最后绘制裁剪后的图。 ## 二、使用 putImageData() 方法 另一种裁剪方法是使用 putImageData() 方法，该方法可以将 imageData 对象（包含像素数据）绘制到 canvas 上。我们可以先截取图片中指定部分的 imageData 数据，然后再将其绘制在 canvas 上。 ```html

裁剪不规则图片方法二：使用 putImageData()

``` 以上代码中，我们创建了一个 100*100 大小的 imageData 对象。在图片加载完成后，绘制了原图到 canvas 上，并获取了原图的像素数据。接着我们遍历了像素数据，将不在指定形状内的像素设为透明，再将修改后的像素数据存到 imageData 中，最后绘制裁剪后的图。这里的示例以圆形为例，你可以根据需求修改裁剪的形状。 ## 三、利用 CSS 属性 clip-path 除了使用 JavaScript 和 HTML canvas 绘制，我们还可以使用 CSS 属性 clip-path 来裁剪不规则的图片。clip-path 属性可以定义一个裁剪路径，只有在该路径内的内容才会被显示出来。 ```html

裁剪不规则图片方法三：使用 clip-path

``` 以上代码中，我们创建了一个 `