前端使用canvas旋转图片然后拿到图片地址

在前端利用HTML5的Canvas元素可以对图片进行旋转操作。以下是基本步骤：

1. 首先，你需要创建一个`<canvas>`标签，并获取它的2D渲染上下文，通常称为`ctx`：

<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
</script>

2. 加载图片到画布上：

let img = new Image();
img.src = 'your_image_url';
img.onload = function() {
  // 图片加载完成后才开始处理
  drawImage(img);
};

3. 实现图像旋转的方法`drawImage`：

function drawImage(img) {
  ctx.save(); // 保存当前状态
  ctx.translate(canvas.width / 2, canvas.height / 2); // 设置旋转中心点为画布中心
  ctx.rotate(Math.PI * (90 - your_rotation_angle) / 180); // 旋转角度，逆时针为正
  ctx.drawImage(img, -img.width / 2, -img.height / 2); // 绘制图片并调整原点位置，使得旋转后的图片居中
  ctx.restore(); // 恢复原始状态
}

4. 调整旋转角度`your_rotation_angle`为你需要的效果。

注意，旋转后的图片并没有真正的改变其URL，它只是在内存中以旋转的形式显示。如果你需要将旋转后的图片保存为新的URL，那么你可能需要额外处理，例如使用toDataURL方法获取图片数据后另存为新文件。