Größe der HTML-Canvas-Größe nach der transformierten Operation reaktivieren

Ich habe eine Webseite, auf der Benutzer Bilder über die Kamera hochladen und etwas zeichnen können. Also benutze ich , um den freien Zeichnungsteil zu erreichen. Das Problem ist, dass einige Bilder mit falscher Ausrichtung hochgeladen werden und ich daher den Benutzern eine Schaltfläche zur Verfügung stellen muss, mit der sie das Bild mithilfe von Canvas drehen können.Größe der HTML-Canvas-Größe nach der transformierten Operation reaktivieren

Allerdings weiß ich nach einer Drehung des Bildes nicht, wie die Größe der Leinwand geändert wird, so dass sie die gleiche Breite und Höhe hat wie das gedrehte Bild. Im Moment habe ich einige "Leerzeichen", die ich nach der Rotation mit blauem Hintergrund in meinem Code beschreibe. Bitte führen Sie meinen Code unten aus, um besser zu verstehen, was ich hier zu sagen versuche.

Also meine Frage ist, wie Sie die Leinwand Breite und Höhe nach der Drehung so, dass es die gleiche Breite und Höhe wie das gedrehte Bild hat?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Portrait</title> 
 
</head> 
 
<body> 
 
\t <canvas id="myCanvas"></canvas><br/> 
 
\t <input type="file" onchange="fileUpload(this.files)" id="file-input" capture="camera"><br/><br/> 
 
\t <button onclick="rotate()">Rotate</button> 
 

 
\t <script> 
 
\t \t var file, canvas, ctx, image, fileURL, rotation = 90; 
 

 
    function fileUpload(files) { 
 
     file = files[0] 
 
     fileURL = URL.createObjectURL(file) 
 
     canvas = document.getElementById('myCanvas') 
 
     canvas.style.backgroundColor = "blue" 
 
     ctx = canvas.getContext('2d') 
 
     image = new Image() 
 

 
     image.onload = function() { 
 
      canvas.width = 500 
 
      canvas.height = (500 * this.height)/this.width 
 
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height) 
 
     } 
 
     image.src = fileURL 
 
    } 
 

 
    function rotate() { 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
     ctx.save(); //save canvas state 
 
     ctx.translate(canvas.width/2, canvas.height/2); 
 
     ctx.rotate(rotation * Math.PI/180); 
 
     ctx.translate(-canvas.width/2, -canvas.height/2); 
 
     ctx.drawImage(image, 0, 0, canvas.width, canvas.height); 
 
     rotation += 90; 
 
     ctx.restore(); //restore canvas state 
 
    } 
 
\t </script> 
 
</body> 
 
</html>

Quelle

2017-06-29 notQ

Sie, dass in der folgenden Art und Weise erreichen können ...

var file, canvas, ctx, image, fileURL, imgWidth, imgHeight, rotation = 90, state = true; 
 

 
function fileUpload(files) { 
 
    file = files[0]; 
 
    fileURL = URL.createObjectURL(file); 
 
    canvas = document.getElementById('myCanvas'); 
 
    canvas.style.backgroundColor = "blue"; 
 
    ctx = canvas.getContext('2d'); 
 
    image = new Image(); 
 

 
    image.onload = function() { 
 
     imgWidth = image.width; //image width 
 
     imgHeight = image.height; //image height 
 
     canvas.width = imgWidth; //set canvas width as image width 
 
     canvas.height = imgHeight; //set canvas height as image height 
 
     ctx.drawImage(image, 0, 0); 
 
    } 
 
    image.src = fileURL 
 
} 
 

 
function rotate() { 
 
    state = !state; //canvas state (orientation) 
 
    if (state) { //if state is true 
 
     canvas.width = imgWidth; 
 
     canvas.height = imgHeight; 
 
    } else { //if state is false 
 
     canvas.width = imgHeight; //set canvas width as image height 
 
     canvas.height = imgWidth; //set canvas height as image width 
 
    } 
 

 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.save(); //save canvas state 
 
    ctx.translate(canvas.width/2, canvas.height/2); 
 
    ctx.rotate(rotation * Math.PI/180); 
 
    if (state) ctx.translate(-canvas.width/2, -canvas.height/2); //translate depending on orientation 
 
    else ctx.translate(-canvas.height/2, -canvas.width/2); // ^^ 
 
    ctx.drawImage(image, 0, 0); 
 
    rotation += 90; 
 
    ctx.restore(); //restore canvas state 
 
}

<canvas id="myCanvas"></canvas> 
 
<br/> 
 
<input type="file" onchange="fileUpload(this.files)" id="file-input" capture="camera"> 
 
<br/> 
 
<br/> 
 
<button onclick="rotate()">Rotate</button>

^{Entschuldigung für nicht Erklärung geben}

Quelle

2017-06-29 13:24:45

Heilige Scheiße, danke! – notQ

Größe der HTML-Canvas-Größe nach der transformierten Operation reaktivieren

Antwort

Verwandte Themen