Изменение размера фотографии на холсте без потери соотношения сторон - PullRequest
Новая
       26

Изменение размера фотографии на холсте без потери соотношения сторон

5 голосов
/ 19 июля 2011

Привет всем, спасибо за любую помощь заранее.Я пишу приложение для телефона и не могу сжать фотографию, не потеряв аспект и не обрезав изображение по ошибке.В функции ниже «imageData» представляет собой 64-битную строку фотографии, сделанной камерой.Я могу нарисовать изображение на холсте на моей странице, но если фотография была сделана в альбомной ориентации, то она разбита вместе.Если я не масштабирую его ни с помощью функции масштабирования, ни с помощью функции drawimage, тогда я получаю только верхний угол фотографии.Пример: я сделал фотографию, ширина изображения в функции onPhotoDataSuccess показывает, что она имеет ширину 1296 пикселей и высоту 968 пикселей.Но мой холст на iPhone имеет ширину 272 пикселя (портретный режим).Я пробовал много разных методов масштабирования в Интернете, и это, кажется, ближе всего, не совсем.Что я делаю не так? 

 function onPhotoDataSuccess(imageData) 
{
var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d"); 
myImage.onload = function() 
  { 
    thecanvas.setAttribute('width', '100%');
    thecanvas.setAttribute('height', 'auto');
    ctx.scale((myImage.width * 0.15), (myImage.height * 0.15));  
    ctx.drawImage(myImage, 0, 0);   
    }     

    myImage.src = "data:image/jpeg;base64," + imageData;      
}

Ответы [ 2 ]

7 голосов
/ 19 июля 2011

В drawImage встроено масштабирование.

Не используйте setAttribute при работе с canvas, вместо этого вызывайте canvas.width = 272 и только со значениями целых пикселей.

Вот некоторый рабочий коддля начала: 

 function onPhotoDataSuccess(imageData)
{
var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d");

    myImage.onload = function() {
    ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);
    }     

    myImage.src = "http://placekitten.com/1296/968";
}


onPhotoDataSuccess(null);

Живой пример:

http://jsfiddle.net/QBTrg/6/

1 голос
/ 19 июля 2011

Вы можете просто рисовать так, без функции scale: 

ctx.drawImage(myImage, 0, 0, myImage.width * 0.15, myImage.height * 0.15);

Однако разрешение должно быть установлено явно, а не в процентах. E.g.:

window.onload = function() {
    thecanvas.width = window.width;
    thecanvas.height = window.height;
}
...