实现图片裁剪功能，需要使用 canvas 元素。canvas 是一个 HTML5 元素，可以用来绘制图像、图形、动画等等。以下是使用 canvas 实现图片裁剪的步骤：
new Image() 或者 document.createElement('img') 创建。drawImage() 方法，裁剪出需要的部分。实现图片旋转功能也需要使用 canvas 元素。以下是使用 canvas 实现图片旋转的步骤：
new Image() 或者 document.createElement('img') 创建。rotate() 方法，旋转图片。
// 创建一个 canvas 元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 获取一个 Image 对象
var img = new Image();
img.onload = function() {
// 将图片绘制到 canvas 上
ctx.drawImage(img, 0, 0);
// 裁剪出需要的部分
var croppedCanvas = document.createElement('canvas');
var croppedCtx = croppedCanvas.getContext('2d');
croppedCanvas.width = 100;
croppedCanvas.height = 100;
croppedCtx.drawImage(canvas, 50, 50, 100, 100, 0, 0, 100, 100);
// 将裁剪后的图像输出到新的 canvas 中
var outputCanvas = document.createElement('canvas');
var outputCtx = outputCanvas.getContext('2d');
outputCanvas.width = 100;
outputCanvas.height = 100;
outputCtx.drawImage(croppedCanvas, 0, 0, 100, 100, 0, 0, 100, 100);
// 将输出的图像添加到页面中
document.body.appendChild(outputCanvas);
// 旋转图片
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 4);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
ctx.restore();
// 将旋转后的图像输出到新的 canvas 中
var outputCanvas2 = document.createElement('canvas');
var outputCtx2 = outputCanvas2.getContext('2d');
outputCanvas2.width = canvas.width;
outputCanvas2.height = canvas.height;
outputCtx2.drawImage(canvas, 0, 0);
// 将输出的图像添加到页面中
document.body.appendChild(outputCanvas2);
};
img.src = 'path/to/image';