canvas 保存图片旋转

你可以使用 canvas 的 toDataURL 方法将画布保存为图片，然后使用 JavaScript 中的 Image 对象进行旋转操作，最后再将旋转后的图片保存下来。具体实现可以参考以下代码：

// 获取 canvas 元素和上下文对象
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 绘制图形
ctx.fillRect(50, 50, 100, 100);

// 将 canvas 转换为图片
const dataURL = canvas.toDataURL();

// 创建 Image 对象
const img = new Image();

// 加载图片
img.onload = function() {
  // 创建临时 canvas 元素
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');

  // 设置临时 canvas 元素的宽高
  tempCanvas.width = img.height;
  tempCanvas.height = img.width;

  // 旋转图片
  tempCtx.translate(img.height / 2, img.width / 2);
  tempCtx.rotate(Math.PI / 2);
  tempCtx.drawImage(img, -img.width / 2, -img.height / 2);

  // 将旋转后的图片保存为文件
  const link = document.createElement('a');
  link.download = 'image.png';
  link.href = tempCanvas.toDataURL();
  link.click();
};

// 设置 Image 对象的 src 属性
img.src = dataURL;