JS通过canvas 获取旋转180度图片

在JavaScript中，通过HTML5的Canvas API获取并旋转180度图片通常需要以下步骤：

1. **创建Canvas元素**：
首先，在HTML中创建一个`<canvas>`元素，并给它设置一个id，例如`myCanvas`。

<canvas id="myCanvas" width="400" height="400"></canvas>

2. **绘制图片到Canvas**：
使用`toDataURL()`方法获取图片的原始数据URL，然后通过`drawImage()`函数将图片绘制到Canvas上，初始角度设为0。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'your_image_url'; // 替换为实际图片路径
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};

3. **旋转图片**：
调用`rotate()`方法，传入180度作为参数来旋转当前绘图上下文。这会改变Canvas内部图像的位置，使得原本正向的图片看起来像是180度旋转了。

ctx.rotate(Math.PI); // 180度等于Math.PI radians

4. **保存图片数据**：
如果你想保存这个旋转后的图片，可以再次调用`toDataURL()`，然后根据需要下载或另存图片。

var rotatedDataUrl = canvas.toDataURL();
// 下载或处理这个rotatedDataUrl...