День добрый. Мой вопрос может показаться Вам тривиальным. Просто хочу понять одну вещь в интернетах описанную мало и поверхностно. А именно создание превью при помощи canvas drawImage(). Сам код то, конечно, есть везде, но не везде есть доходчивое описание почему надо именно так, а не иначе.
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = '#path-to-image.jpg#';
img.onload = function(){
ctx.drawImage(img,0,0, 300, 150);
}
Размер исходного изображения у меня 1600x1200. Соотношение 1,3. То есть, если мне, к примеру, необходимо чтобы превью было в ширину 300, то его высота должна быть соответственно 230. Отлично.
ctx.drawImage(img,0,0, 300, 230);
Но вот беда. Получилось не превью, а кусок картинки 300 на 230:
300 на 150 выглядит так как надо:
В поисках ответа на вопрос наткнулся на
http://dev.w3.org/csswg/css3-images/#sizing-terms, где описана интересная вещь:
The default object size is a rectangle with a definite height and width used to determine the concrete object size when both the intrinsic dimensions and specified size are missing dimensions. It varies based on the context in which that the image is being laid out.
The following list defines the default object size of properties and contexts that appear in CSS 2.1, plus ‘border-image’ from CSS 3 Backgrounds & Borders. Newer modules that accept an ‘<image>’ component value in a new context must define the default object size in that context.
replaced elements
The default object size is a rectangle 300px wide and 150px tall. [CSS21]
И вот тут Я немного запутался. Получается если размеры изображения не заданы явно или опущены, то лучше указывать 300 на 150 и варьировать уже размеры самого холста через CSS?
Не могли бы Вы мне доходчиво втолковать что к чему и как правильно рассчитывать размеры превьюшек?
P.S: Это знание необходимо мне в целях самообучения. О кучи готовых галерей Я в курсе.
