利用HTML5 canvas标签实现图片裁剪、旋转和缩放的示例代码
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本示例展示了如何使用HTML5的canvas标签进行图片裁剪、旋转及缩放操作。通过JavaScript与canvas API结合，实现对图像的灵活编辑处理。
使用HTML5的canvas标签可以实现图片裁剪、旋转和缩放功能。以下是一些示例代码：
1. 图片加载到Canvas：
```javascript
var img = new Image();
img.src = path/to/image.jpg;
img.onload = function() {
var canvas = document.getElementById(myCanvas);
var ctx = canvas.getContext(2d);
// 设置canvas大小为图片的尺寸
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
// 将图像绘制到画布上
ctx.drawImage(img, 0, 0);
};
```
2. 图片裁剪：
```javascript
function cropImage(sourceX, sourceY, sourceWidth, sourceHeight) {
var canvas = document.getElementById(myCanvas);
var ctx = canvas.getContext(2d);
// 创建一个新画布用于存储裁剪后的图像
var croppedCanvas = document.createElement(canvas);
croppedCanvas.width = sourceWidth;
croppedCanvas.height = sourceHeight;
var cropCtx = croppedCanvas.getContext(2d);
// 使用drawImage方法进行裁剪操作，从sourceX, sourceY开始到sourceWidth和sourceHeight结束
cropCtx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight);
return croppedCanvas;
}
```
3. 图片旋转：
```javascript
function rotateImage(degrees) {
var canvas = document.getElementById(myCanvas);
var ctx = canvas.getContext(2d);
// 获取原始图像的宽度和高度
var imgWidth = this.naturalWidth;
var imgHeight = this.naturalHeight;
// 计算旋转后的画布大小（保持图像完整显示）
var angleInRadians = degrees * Math.PI / 180;
var rotatedCanvasWidth = (imgHeight * Math.abs(Math.sin(angleInRadians))) + (imgWidth * Math.cos(angleInRadians));
var rotatedCanvasHeight = (imgHeight * Math.cos(angleInRadians)) + (imgWidth * Math.sin(angleInRadians));
// 创建新画布用于存放旋转后的图像
canvas.width = rotatedCanvasWidth;
canvas.height = rotatedCanvasHeight;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((degrees * Math.PI) / 180);
// 绘制原始图像到新的位置和角度上
ctx.drawImage(img, -imgWidth/2, -imgHeight/2);
}
```
4. 图片缩放：
```javascript
function scaleImage(scaleFactor) {
var canvas = document.getElementById(myCanvas);
var ctx = canvas.getContext(2d);
// 获取原始图像的宽度和高度，并根据比例因子计算新的尺寸
var imgWidth = this.naturalWidth;
var imgHeight = this.naturalHeight;
var newWidth = imgWidth * scaleFactor;
var newHeight = imgHeight * scaleFactor;
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
}
```
以上代码提供了基本的图像处理功能，您可以根据实际需求进行调整和扩展。
全部评论 (0)
