在畫布內旋轉圖像時出現了一些問題

問題：當我旋轉添加的圖像時，圖像沒有按照我希望的那樣居中。我一直在畫布上方的白色區域上方顯示圖片。在畫布內旋轉圖像時出現了一些問題

嘗試使用16：9的比例圖像，旋轉後您會看到我的問題。這將被用於移動，所以圖片的寬度可能是最大640

HTML：

<div id="files"> 
    <input type="file" id="imageLoader" name="imageLoader" /> 
</div> 
<canvas id="imageCanvas"></canvas> 
<canvas id="preview"></canvas> 
     <input type="button" id="saveButton" value="Save" /> 
<div id="rotate"> 
     <button type="button" id="rotateLeft">Rotate -90°</button> 
     <button type="button" id="rotateRight">Rotate 90°</button> 
    </div>

JS：

var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 
    var image = ""; 
    var canvas = document.getElementById('imageCanvas'); 
    var ctx = canvas.getContext("2d"); 
    var fileName = ""; 
    var angleInDegrees = 0; 
    function handleImage(e) { 
     var reader = new FileReader(); 
     reader.onload = function(event) { 
      var img = new Image(); 
      img.onload = function() { 
       canvas.width = img.width; 
       canvas.height = img.height; 
       ctx.drawImage(img, 0,0); 
       fileName = img.name; 
       image = img; 
      }; 
      img.src = event.target.result; 
     }; 
     reader.readAsDataURL(e.target.files[0]); 
    } 

    function drawRotated(degrees) { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.save(); 
     ctx.translate(canvas.width/2, canvas.height/2); 
     ctx.rotate(degrees * Math.PI/180); 
     ctx.drawImage(image, -image.width/2, -image.width/2); 
     ctx.restore(); 
    } 

    $("#rotateRight").click(function() { 
     angleInDegrees += 90; 
     drawRotated(angleInDegrees); 
    }); 

    $("#rotateLeft").click(function() { 
     angleInDegrees -= 90; 
     drawRotated(angleInDegrees); 
    });

jsfiddle.net/dJ5BH

這是我的ne w小提琴:)如果我想要它是最大640寬度？

來源

2014-02-17 sindrem

你在你的drawImage一個錯字：

ctx.drawImage(image, -image.width/2, -image.height/2);

除非你的形象永遠是正方形，你必須調整畫布，使旋轉的圖像，以適應。如何調整畫布

演示：http://jsfiddle.net/m1erickson/3E99A/

如果你不想更改畫布大小，你的圖像將被裁剪。此外，如果圖像爲橫向，你必須翻動的drawImage寬度/高度：

// flip width/height when the image is in landscape orientation 

ctx.drawImage(image, -image.height/2, -image.width/2);

代碼如何調整畫布：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <style> 
     #canvas{ 
      border: 1px solid green; 
     } 
    </style> 
    <script> 
    $(function(){ 
     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 
     var imgWidth=200; 
     var imgHeight=300; 
     var size={width:imgWidth, height:imgHeight}; 
     var rotation=0; 
     var deg2Rad=Math.PI/180; 
     var count1=0; 
     var count2=0; 

      var img=new Image(); 
      img.onload=function(){ 
       imgWidth=img.width; 
       imgHeight=img.height; 
       size={width:imgWidth, height:imgHeight}; 
       draw(); 
      } 
      img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/card.png"; 

     function draw(){ 
     canvas.width=size.width; 
     canvas.height=size.height; 

     // calculate the centerpoint of the canvas 
     var cx=canvas.width/2; 
     var cy=canvas.height/2; 
     var info=document.getElementById("info"); 
     info.innerHTML="canvas size: "+(count1++)+": "+cx+"/"+cy; 

     // draw the rect in the center of the newly sized canvas 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.fillStyle="rgba(216,216,150,1.0)"; 
     ctx.translate(cx,cy); 
     ctx.rotate(rotation * deg2Rad); 
     ctx.drawImage(img,-imgWidth/2,-imgHeight/2); 
     } 

     document.getElementById("rotate").addEventListener("click", resizeClicked, false); 

     function resizeClicked(e){ 
     rotation+=30; 
     newSize(imgWidth,imgHeight,rotation); 
     draw(); 
     } 

     function newSize(w,h,a){ 
     var rads=a*Math.PI/180; 
     var c = Math.abs(Math.cos(rads)); 
     var s = Math.abs(Math.sin(rads)); 
     size.width = h * s + w * c; 
     size.height = h * c + w * s ; 
     } 

    }); // end onload 
    </script> 
</head> 
<body> 
    <button id="rotate">Rotate with resize</button> 
    <p id=info></p> 
    <canvas id="canvas" width=400 height=400></canvas> 
</body> 
</html>

來源

2014-02-17 16:57:27 markE

jsfiddle.net/dJ5BH這是我的新小提琴:)如果我想什麼它是最大640寬度？ – sindrem

您可以使用ctx.scale縮小任何圖像以適合您希望的最大寬度（640px寬度）。這裏有一個例子小提琴：http://jsfiddle.net/m1erickson/pYqTg/ – markE

謝謝！ :)你在哪裏找到這些小提琴？！ – sindrem

嘗試改變這一行：

ctx.drawImage(image, -image.width/2, -image.width/2);

到：

ctx.drawImage(image, -image.width/2, -image.height/2); 
               ^^^^^^

或其他寬度將用作旋轉兩個軸的基礎。

也看到這個答案的一種方式旋轉，適合在畫布基於旋轉圖像：
Rotate original Image with jQuery or JavaScript

來源

2014-02-17 16:57:34 K3N

http://jsfiddle.net/dJ5BH/ 這是我的新小提琴:)如果我想要它是最大640寬度？ – sindrem

在畫布內旋轉圖像時出現了一些問題

回答

相關問題