bezahlt von Canvas Bilder rotieren
Vor dem Upload ist es oft wünschenwerts ein Bild drehen/rotieren zu können.
Ich hatte mich damals doch sehr damit rumgeärgert, um den richtigen Mittelpunkt bei Rotationen heraus zu bekommen.
Hier ist meine Lösung für Rotationen um 90,180,270 Grad (select oder durch Auf- und Abrunden kann man das sicher stellen,
dass keine anderen Werte eingegeben werden).
var rotate=parseInt(this.rotate);
if(rotate>0){
if(rotate!=180){
ctx.canvas.width=height;
ctx.canvas.height=width;
}
else{
ctx.canvas.width=width;
ctx.canvas.height=height;
}
ctx.save();
ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);
ctx.rotate(((Math.PI / 180)*rotate));
ctx.drawImage(this.img.image,0-(width/2),0-(height/2),width,height);
ctx.restore();
}
else{
ctx.canvas.width=width;
ctx.canvas.height=height;
ctx.drawImage(this.img.image,0,0,width,height);
}
Ich hatte mich damals doch sehr damit rumgeärgert, um den richtigen Mittelpunkt bei Rotationen heraus zu bekommen.
Hier ist meine Lösung für Rotationen um 90,180,270 Grad (select oder durch Auf- und Abrunden kann man das sicher stellen,
dass keine anderen Werte eingegeben werden).
var rotate=parseInt(this.rotate);
if(rotate>0){
if(rotate!=180){
ctx.canvas.width=height;
ctx.canvas.height=width;
}
else{
ctx.canvas.width=width;
ctx.canvas.height=height;
}
ctx.save();
ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);
ctx.rotate(((Math.PI / 180)*rotate));
ctx.drawImage(this.img.image,0-(width/2),0-(height/2),width,height);
ctx.restore();
}
else{
ctx.canvas.width=width;
ctx.canvas.height=height;
ctx.drawImage(this.img.image,0,0,width,height);
}
| User | annonyme | 2015-08-15 22:05 |
write comment: