在JavaScript中使用新图像旋转图像()

// 创建一个新的图像对象
var image = new Image();

// 设置图像的源路径
image.src = 'image.jpg';

// 等待图像加载完成后执行旋转操作
image.onload = function() {
  // 创建一个Canvas元素
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  // 设置Canvas的宽高与图像相同
  canvas.width = image.width;
  canvas.height = image.height;

  // 将图像绘制到Canvas上
  ctx.drawImage(image, 0, 0);

  // 旋转图像
  var angle = 45; // 旋转角度，单位为度
  var rotatedImage = rotateImage(image, angle);

  // 在页面上显示旋转后的图像
  document.body.appendChild(rotatedImage);
};

// 旋转图像的函数
function rotateImage(image, angle) {
  // 创建一个新的Canvas元素
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  // 计算旋转后的图像宽高
  var width = Math.abs(Math.cos(angle)) * image.width + Math.abs(Math.sin(angle)) * image.height;
  var height = Math.abs(Math.sin(angle)) * image.width + Math.abs(Math.cos(angle)) * image.height;

  // 设置Canvas的宽高与旋转后的图像相同
  canvas.width = width;
  canvas.height = height;

  // 保存当前的绘图状态
  ctx.save();

  // 将坐标原点移动到Canvas的中心
  ctx.translate(width / 2, height / 2);

  // 旋转坐标系
  ctx.rotate(angle * Math.PI / 180);

  // 绘制旋转后的图像
  ctx.drawImage(image, -image.width / 2, -image.height / 2);

  // 恢复绘图状态
  ctx.restore();

  // 创建一个新的图像对象
  var rotatedImage = new Image();

  // 将Canvas转换为图像
  rotatedImage.src = canvas.toDataURL();

  // 返回旋转后的图像
  return rotatedImage;
}