Question

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

哪种方式最好做那个小技巧？

我使用Angular并且优先使用指令。但我发现只是渲染CSS来旋转图像。没有重新渲染图像..

Answer 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>

看，你可以在一个按钮中调用该功能，这种情况下我的图像是＆＃39; house.png＆＃39;。

看一个例子：HERE

旋转图像并保存旋转的图像

1 个答案: