Рисование изображения на холсте - больше реального

Я хочу нарисовать изображение из файла jpg на холсте. Мой код:

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0);
  };
  imageObj.src = 'img/my_image.jpg';

Проблема в том, что изображение на холсте намного больше, чем в файле. Зачем? Как я могу нарисовать реальный размер изображения?

UPDATE: результат: http://jsfiddle.net/AJK2t/

Ответы

Ответ 1

Это ваша проблема:

<canvas style="width: 700px; height: 400px;" id="konf"></canvas>

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

Самое простое исправление:

<canvas width="700" height="400" id="konf"></canvas>

Параметры width и height управляют количеством пикселей в холсте. Без стилей CSS по умолчанию визуальный размер холста также будет такого размера, в результате чего один пиксель canvas на пиксель экрана (если вы не увеличили масштаб веб-браузера).

Скопировать/вставить из мой ответ на соответствующий вопрос:

Подумайте, что произойдет, если у вас есть JPG 32x32 (он имеет ровно 1024 общих пикселя), но укажите через CSS, что он должен выглядеть как width:800px; height:16px. То же самое относится к HTML Canvas:

  • Атрибуты width и height самого элемента canvas определяют, сколько пикселей вы можете нарисовать. Если вы не укажете высоту и ширину элемента canvas, тогда для спецификаций:
    "атрибуту width по умолчанию соответствует 300, а атрибуту height по умолчанию соответствует 150.

  • Свойства CSS width и height управляют размером, отображаемым элементом на экране. Если размеры CSS не установлены, для макета используется собственный размер элемента.

Если вы укажете в CSS разный размер, чем фактические размеры холста, он должен быть растянут и раздавлен браузером по мере необходимости для отображения. Вы можете увидеть пример этого здесь: http://jsfiddle.net/9bheb/5/

Ответ 2

Рабочий пример: http://jsfiddle.net/jzF5R/

Чтобы масштабировать изображение, вам необходимо предоставить масштабированную ширину и высоту, которые вы хотите ctx.drawImage():

// x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);

Сохраняйте исходный размер изображения:

ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);

Держите холст от переполнения страницы:

ctx.canvas.width = document.body.clientWidth;

Вы можете легко масштабировать ширину и высоту изображения до 70% от оригинала:

ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);

Ответ 3

Чтобы отобразить поток MJPEG на холсте (или что-то еще), не определяя ширину и высоту холста в HTML, так что только используя CSS, чтобы получить отзывчивый холст и соответствовать его странице, я использую это:

//get size from CSS
var sizeWidth = context.canvas.clientWidth;   
var sizeHeight = context.canvas.clientHeight;   
//here the solution, it replaces HTML width="" height=""
canvas.width = sizeWidth;
canvas.height = sizeHeight;
...........
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, sizeWidth, sizeHeight);

Изображение полностью содержится в холсте независимо от размера холста (скорость между высотой и шириной не сохраняется, но это не имеет значения, height:auto; в css может это исправить).

Et voilà!