Имея некоторые проблемы с вращением изображения внутри холста

Проблема: Когда я поворачиваю свое добавленное изображение, изображение не центрируется, как хотелось бы. Я продолжаю получать белую область над моей картиной внутри холста.Имея некоторые проблемы с вращением изображения внутри холста

Попробуйте изображение с соотношением сторон 16: 9, и вы увидите мою проблему после поворота. Это будет использоваться для мобильных устройств, поэтому ширина изображения может быть не более 640.

Here is a fiddle Текущий код:

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);

Если ваше изображение всегда квадрат, вы должны изменить размер холста, чтобы позволить повернутое изображение, чтобы соответствовать.

Demo о том, как изменить размер холста: 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, чтобы уменьшить любое изображение, чтобы оно соответствовало желаемой максимальной ширине (ширина 640 пикселей). Вот пример скрипки: 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

Имея некоторые проблемы с вращением изображения внутри холста

ответ

Смежные вопросы