旋转图像并保存旋转图像答案

【问题标题】：Rotate images and save rotated images旋转图像并保存旋转图像
【发布时间】：2014-12-23 13:36:40
【问题描述】：

我想旋转图像，然后将其另存为已旋转。

哪种方式最适合做这个小技巧？

我正在使用 Angular，并且更喜欢为此使用指令。但我发现的只是渲染 CSS 来旋转图像。不重新渲染图像。

【问题讨论】：

【解决方案1】：

试试这个。

<script>
var imgOriginal = 'house.png';
var canvas=document.createElement("canvas");
canvas.width = 300;
canvas.height= 300;
var ctx = canvas.getContext("2d");
ctx.translate(canvas.width/2,canvas.height/2);
// cria imagem inicial
var image = document.createElement("img");
image.src = imgOriginal;
document.body.appendChild(image);
function drawRotated(degrees){
    // limpa canvas, rotaciona e desenha imagem no centro
    ctx.clearRect(-canvas.width,-canvas.height,canvas.width*2,canvas.height*2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.width/2);
    // cria nova imagem no html
    var img = document.createElement('img');
    img.src = canvas.toDataURL("image/png");
    document.body.appendChild(img);
}
image.onload = function() {
    drawRotated(90);
    drawRotated(180);
    drawRotated(270);
};
</script>

你看，你可以在一个按钮中调用函数，这个例子我的图像是'house.png'。

看一个例子：HERE

【讨论】：